我一直在阅读jQuery的延迟和承诺,我看不出使用.then()和.done()成功回调之间的区别。我知道Eric Hynds提到.done()和.success()映射到相同的功能,但我猜.then()也是如此,因为所有的回调都是在成功操作完成时调用的。
有人能告诉我正确的用法吗?
我一直在阅读jQuery的延迟和承诺,我看不出使用.then()和.done()成功回调之间的区别。我知道Eric Hynds提到.done()和.success()映射到相同的功能,但我猜.then()也是如此,因为所有的回调都是在成功操作完成时调用的。
有人能告诉我正确的用法吗?
当前回答
Then()总是意味着在任何情况下都会调用它。但是在不同的jQuery版本中传递的参数是不同的。
在jQuery 1.8之前,then()等于done().fail()。所有的回调函数共享相同的参数。
但是从jQuery 1.8开始,then()返回一个新的promise,如果它有返回值,它将被传递到下一个回调函数。
让我们看看下面的例子:
var defer = jQuery.Deferred();
defer.done(function(a, b){
return a + b;
}).done(function( result ) {
console.log("result = " + result);
}).then(function( a, b ) {
return a + b;
}).done(function( result ) {
console.log("result = " + result);
}).then(function( a, b ) {
return a + b;
}).done(function( result ) {
console.log("result = " + result);
});
defer.resolve( 3, 4 );
在jQuery 1.8之前,答案应该是
result = 3
result = 3
result = 3
所有结果花费3。然后()函数总是将相同的延迟对象传递给下一个函数。
但是从jQuery 1.8开始,结果应该是:
result = 3
result = 7
result = NaN
因为第一个then()函数返回一个新的promise,值7(这是唯一要传递的参数)被传递给下一个done(),所以第二个done()将result = 7。第二个then()将7作为a的值,并将undefined作为b的值,因此第二个then()返回一个带有参数NaN的新承诺,最后一个done()打印NaN作为其结果。
其他回答
.done()终止承诺链,确保没有其他步骤可以附加。这意味着jQuery承诺实现可以抛出任何未处理的异常,因为没有人可以使用.fail()处理它。
实际上,如果您不打算为承诺附加更多步骤,则应该使用.done()。要了解更多细节,请参阅为什么需要兑现承诺
在处理返回结果的方式上也有区别(它被称为链接,done不链接,然后产生调用链)
promise.then(function (x) { // Suppose promise returns "abc"
console.log(x);
return 123;
}).then(function (x){
console.log(x);
}).then(function (x){
console.log(x)
})
将记录以下结果:
abc
123
undefined
而
promise.done(function (x) { // Suppose promise returns "abc"
console.log(x);
return 123;
}).done(function (x){
console.log(x);
}).done(function (x){
console.log(x)
})
将得到以下结果:
abc
abc
abc
---------- 更新:
顺便说一句。我忘了说,如果你返回一个Promise而不是原子类型值,外部Promise将等待内部Promise解决:
promise.then(function (x) { // Suppose promise returns "abc"
console.log(x);
return $http.get('/some/data').then(function (result) {
console.log(result); // suppose result === "xyz"
return result;
});
}).then(function (result){
console.log(result); // result === xyz
}).then(function (und){
console.log(und) // und === undefined, because of absence of return statement in above then
})
通过这种方式,组合并行或顺序异步操作变得非常简单,例如:
// Parallel http requests
promise.then(function (x) { // Suppose promise returns "abc"
console.log(x);
var promise1 = $http.get('/some/data?value=xyz').then(function (result) {
console.log(result); // suppose result === "xyz"
return result;
});
var promise2 = $http.get('/some/data?value=uvm').then(function (result) {
console.log(result); // suppose result === "uvm"
return result;
});
return promise1.then(function (result1) {
return promise2.then(function (result2) {
return { result1: result1, result2: result2; }
});
});
}).then(function (result){
console.log(result); // result === { result1: 'xyz', result2: 'uvm' }
}).then(function (und){
console.log(und) // und === undefined, because of absence of return statement in above then
})
上面的代码并行地发出两个http请求,从而使请求更快地完成,而下面这些http请求则按顺序运行,从而减少服务器负载
// Sequential http requests
promise.then(function (x) { // Suppose promise returns "abc"
console.log(x);
return $http.get('/some/data?value=xyz').then(function (result1) {
console.log(result1); // suppose result1 === "xyz"
return $http.get('/some/data?value=uvm').then(function (result2) {
console.log(result2); // suppose result2 === "uvm"
return { result1: result1, result2: result2; };
});
});
}).then(function (result){
console.log(result); // result === { result1: 'xyz', result2: 'uvm' }
}).then(function (und){
console.log(und) // und === undefined, because of absence of return statement in above then
})
实际上有一个非常关键的区别,因为jQuery的deferred是承诺的实现(query3.0实际上试图将它们纳入规范)。
完成/然后之间的关键区别是
.done()总是返回与开始时相同的Promise/wrapped值,无论你做什么或你返回什么。 .then()总是返回一个NEW Promise,你负责根据你传递给它返回的函数来控制这个Promise是什么。
从jQuery翻译到本地ES2015 Promises, .done()有点像在Promise链中实现一个围绕函数的“tap”结构,如果链处于“resolve”状态,它将传递一个值给函数…但该函数的结果不会影响链本身。
const doneWrap = fn => x => { fn(x); return x };
Promise.resolve(5)
.then(doneWrap( x => x + 1))
.then(doneWrap(console.log.bind(console)));
$.Deferred().resolve(5)
.done(x => x + 1)
.done(console.log.bind(console));
它们的对数都是5,而不是6。
注意,我使用done和doneWrap来记录日志,而不是.then。这是因为console.log函数实际上并不返回任何东西。如果你传递。then一个不返回任何东西的函数会发生什么?
Promise.resolve(5)
.then(doneWrap( x => x + 1))
.then(console.log.bind(console))
.then(console.log.bind(console));
这将记录:
5 未定义的
发生了什么事?当我使用.then并传递给它一个不返回任何东西的函数时,它的隐式结果是“undefined”…它当然会返回一个Promise[undefined]给next then方法,该方法的日志为undefined。所以我们开始时的初始值基本失去了。
.then()本质上是一种函数组合形式:每一步的结果都被用作下一步函数的实参。这就是为什么.done最好被认为是一个“tap”->,它实际上不是组合的一部分,只是在某一步偷偷查看值并在该值上运行函数,但实际上并不以任何方式改变组合。
这是一个非常基本的区别,可能有一个很好的原因,为什么本机promise没有实现自己的.done方法。我们不需要讨论为什么没有.fail方法,因为它更复杂(即.fail/。catch不是.done/的镜像。然后- .catch中返回裸值的>函数不会像传递给.catch的函数那样被拒绝,然后它们会被解决!)
deferred.done ()
添加仅在Deferred被解析时调用的处理程序。您可以添加多个回调被调用。
var url = 'http://jsonplaceholder.typicode.com/posts/1';
$.ajax(url).done(doneCallback);
function doneCallback(result) {
console.log('Result 1 ' + result);
}
你也可以这样写在上面,
function ajaxCall() {
var url = 'http://jsonplaceholder.typicode.com/posts/1';
return $.ajax(url);
}
$.when(ajaxCall()).then(doneCallback, failCallback);
deferred.then ()
当Deferred被解析、拒绝或仍在进行时,添加要调用的处理程序。
var url = 'http://jsonplaceholder.typicode.com/posts/1';
$.ajax(url).then(doneCallback, failCallback);
function doneCallback(result) {
console.log('Result ' + result);
}
function failCallback(result) {
console.log('Result ' + result);
}
只使用.then()
.done()没有优点,以下是缺点:
不能正确地连接 A.done ().done()与A.done()相同;A.done(),可以用a.then()来估计;交配制度() A.then ().then()与.done()不可能 块resolve()调用(所有.done()处理程序将同步执行) Resolve()可能会从已注册的.done()处理程序获取异常(!) .done()中的异常会将被延迟的对象减半: 进一步的.done()处理程序将被无声地跳过 .那么()就没有这些问题了
我暂时认为.then(oneArgOnly)总是需要.catch(),因此没有异常被无声地忽略,但这不再是真的:unhandledrejection事件在控制台上记录未处理的.then()异常(默认)。很合理的!完全没有理由使用.done()。
证明
下面的代码片段显示:
所有.done()处理程序将在resolve()点同步调用。 记录为1,3,5,7 在脚本掉到底部之前记录 .done()中的异常会影响resolve()调用者 通过catch around resolve()记录 异常打破了进一步.done()解析的承诺 8和10没有被记录! .那么()就没有这些问题了 在线程空闲后,记录为2,4,6,9,11 (片段环境似乎没有unhandledrejject)
顺便说一句,.done()的异常不能被正确捕获:由于.done()的同步模式,错误要么在.resolve()抛出(可能是库代码!),要么在.done()调用抛出,如果延迟已经解决,则该调用附加了罪魁祸首。
console.log('Start of script.'); let deferred = $.Deferred(); // deferred.resolve('Redemption.'); deferred.fail(() => console.log('fail()')); deferred.catch(()=> console.log('catch()')); deferred.done(() => console.log('1-done()')); deferred.then(() => console.log('2-then()')); deferred.done(() => console.log('3-done()')); deferred.then(() =>{console.log('4-then()-throw'); throw 'thrown from 4-then()';}); deferred.done(() => console.log('5-done()')); deferred.then(() => console.log('6-then()')); deferred.done(() =>{console.log('7-done()-throw'); throw 'thrown from 7-done()';}); deferred.done(() => console.log('8-done()')); deferred.then(() => console.log('9-then()')); console.log('Resolving.'); try { deferred.resolve('Solution.'); } catch(e) { console.log(`Caught exception from handler in resolve():`, e); } deferred.done(() => console.log('10-done()')); deferred.then(() => console.log('11-then()')); console.log('End of script.'); <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous" ></script>