web-dev-qa-db-ja.com

追加のパラメーターをjquery ajax promiseコールバックに渡します

Jquery ajax呼び出しの.done promiseコールバックに追加のパラメーターを渡す必要があります。

$.post("MyUrl", JSON.stringify(data))
        .done(onMyUrlLoaded);

標準のコールバックは次のようになります：

function onMyUrlLoaded(data, textStatus, jqXHR) { /* function code */ };

しかし、次のように、コールバックに追加のパラメーターを渡す必要があります。

function onMyUrlLoaded(data, textStatus, jqXHR, extraParam) { /* code */ };

どうすればできますか？

注：この質問は、promiseコールバックに関するものなので、重複するものではありません。この質問に加えて、複製すると言われている質問より2年古い質問であり、はるかに詳細な回答と、約束に関する具体的な回答を提供します。

javascriptjqueryajaxpromise
23
JotaBe

次のように、新しい間接レベルを含めることは非常に簡単であることがわかりました。

var extraParam = 'xyz';

$.post("MyUrl", JSON.stringify(data))
        .done(function(a,b,c) { onMyUrlLoaded(a, b, c, extraParam); });

このように、コールバックは3つの標準パラメーターに加えて、extraParamを受け取ります。

もちろん、これは、promiseが変数に格納されている場合にも実行できます。

function getUrl() {
  // some code ...
  var promise = $.post("MyUrl", JSON.stringify(data));
  return promise;
}

これは次のように呼び出して使用できます。

var promise = getUrl();
var extraParam = 'xyz';
promise.done(function(a,b,c) { onMyUrlLoaded(a, b, c, extraParam); });

bind を使用することで構成される、これを行うための短い構文があります。

関数でbindを呼び出すと、新しい関数が取得されます。 bindに渡される最初のパラメーターは、return関数の本体内でthisになります。追加のパラメーターは、元の引数の前に付加されます。

次のコードは、バインドの使用方法を示しています。 TL; DRの場合、コードの最後の2つのブロックを確認します

// To show the results in the page
var $log = $('#log');
var log = function(text) {
    $log.append(text+'<br/>');
};

// This returns a promise, and resolves it after the specified
// timeout. This behaves like a jQuery ajax call (but for the
// provided timeout)
var trigger = function(timeout) {
    log('<b>trigger</b> invoked');
    var deferred = $.Deferred();
    setTimeout(function() {
        log('<b>trigger</b> resolving promise');
        deferred.resolve('A','B');
    }, timeout);
    return deferred;
};

// This is the function we want to invoke
// The promise returns a and b - the extra params
// must be supplied in some way
var extraParams = function(extra1, extra2, a, b) {
    log('<b>extraParams</b> extra1:' + extra1);
    log('<b>extraParams</b> extra2:' + extra2);
    log('<b>extraParams</b> a:' + a);
    log('<b>extraParams</b> b:' + b);
};


// Doing it using indirection
trigger(500).then(function(a,b) {
  extraParams('extra1','extra2',a,b);
});

// Doing it using bind()
trigger(1200).then(
  extraParams.bind(this,'extra1','extra2')
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log">
</div>
27
JotaBe