javascript 将额外的参数传递给 jquery ajax 承诺回调
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21985201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass extra parameters to jquery ajax promise callback
提问by JotaBe
I need to pass an extra parameter to the .done
promise callback of a jquery ajax call:
我需要向.done
jquery ajax 调用的promise 回调传递一个额外的参数:
$.post("MyUrl", JSON.stringify(data))
.done(onMyUrlLoaded);
The standard callback, would be like this:
标准回调将是这样的:
function onMyUrlLoaded(data, textStatus, jqXHR) { /* function code */ };
But I need to pass an extra parameter to my callback, like this:
但是我需要向我的回调传递一个额外的参数,如下所示:
function onMyUrlLoaded(data, textStatus, jqXHR, extraParam) { /* code */ };
How can I do it?
我该怎么做?
NOTE: this question is not a duplicate, because it's specifically about promise callbacks. Besides this question is two years older than the one which is said to duplicate, and gives a much more thorough answer, and an specifica answer regarding promises.
注意:这个问题不是重复的,因为它专门关于承诺回调。此外,这个问题比据说重复的问题早两年,并且给出了更彻底的答案,以及关于承诺的具体答案。
回答by JotaBe
I've discovered that it's really easy including a new indirection level, just like this:
我发现包含一个新的间接层真的很容易,就像这样:
var extraParam = 'xyz';
$.post("MyUrl", JSON.stringify(data))
.done(function(a,b,c) { onMyUrlLoaded(a, b, c, extraParam); });
In this way, the callback will receive the extraParam, besides the three standard parameters.
这样,回调将收到 extraParam,除了三个标准参数。
Of course, this can also be done if the promise is stored in a variable, for example one returned by a function, like this:
当然,如果 Promise 存储在一个变量中,例如一个由函数返回的变量,也可以这样做,如下所示:
function getUrl() {
// some code ...
var promise = $.post("MyUrl", JSON.stringify(data));
return promise;
}
This can be invoked and used like this:
可以像这样调用和使用它:
var promise = getUrl();
var extraParam = 'xyz';
promise.done(function(a,b,c) { onMyUrlLoaded(a, b, c, extraParam); });
There is a shorter syntax for doing this, which consist in using bind.
执行此操作有一个较短的语法,即使用bind。
When you call bind
in a function, you get a new function. The first parameter passed to bind will become this
inside the body of the return function. The additional parameters will be prependedto the original arguments.
当你调用bind
一个函数时,你会得到一个新函数。传递给 bind 的第一个参数将this
位于返回函数的主体内。附加参数将被添加到原始参数之前。
The following code shows how to use bind. For TL;DR look the two last blocks of code
下面的代码展示了如何使用绑定。对于 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>