javascript - 将额外参数传递给 jquery ajax Promise 回调

Question

这个问题已经有答案了:

Pass an extra argument to a callback function (5 个回答)

已关闭 6 年前。

我需要向 .done 传递一个额外的参数jquery ajax 调用的 promise 回调:

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

标准回调如下:

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

但是我需要向回调传递一个额外的参数，如下所示:

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

我该怎么做？

注意:这个问题不是重复的，因为它专门与 promise 回调有关。此外，这个问题比据说重复的问题早两年，并给出了更彻底的答案，以及关于 promise 的具体答案。

Answer 1

我发现包含一个新的间接级别非常容易，就像这样:

var extraParam = 'xyz';

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

这样，回调中除了三个标准参数之外，还会收到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的第一个参数将成为返回函数体内的this。附加参数将添加到原始参数中。

下面的代码展示了如何使用bind。 TL;DR 查看最后两个代码块

// 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>