等待 jQuery.when ajax 请求答案

【问题标题】：await for jQuery.when ajax requests等待 jQuery.when ajax 请求
【发布时间】：2018-08-05 07:51:07
【问题描述】：

异步函数中的这段代码，没有给出预期的结果：

var result = await $.when( $.get('/api/1'), $.get('/api/2') );

通过一个请求，结果将是我期望的输出（响应文本）。但是，对于这两个请求，返回的 result 是一个不包含两个 Promises 值的数组。有什么解决办法吗？
我知道有then() 和done()，但我更喜欢使用await。

【问题讨论】：

您确定您在控制台中没有收到任何错误吗？ jQuery when 返回一个 jQuery 延迟对象（不是 JavaScript 承诺）......
没有警告。我得到一个包含 3 个项目的数组。但只有一个 responseText。
你得到两个包含 3 项的数组，每个数组中的第一项是响应文本。
嗯，我只得到一个数组。 result[0] = 响应字符串，result[1] = "成功"，result[2] = jqXHR
啊，是的。好吧。使用.done()。 $.when() 和 await 不兼容。或者改用await Promise.all( [$.get('/api/1'), $.get('/api/2')] )。

标签： jquery ajax promise async-await .when

【解决方案1】：

jQuery 的.when() 和原生的await 有不同的语义。比较：

// jQuery

$.when(promise1, promise2).done(function (result1, result2) {
    // work with result1 and result2
});

和

// native

Promise.all([promise1, promise2]).then(function (results) {
    // work with results[0] and results[1]
});

// await is just a variation of the above:

var results = await Promise.all([promise1, promise2]);
// work with results[0] and results[1]

原生实现使用一个包含多个 promise 的数组，而 jQuery 的实现需要多个单独的 promise。

这意味着您不能将await 与$.when() 一起使用。 await 在异步函数完成时有效地为您提供回调的 first 参数的值。

将await 用于Promise.all() 有效，因为第一个参数将是所有结果的数组。将await 用于$.when() 将不起作用，因为第二个结果将是回调的第二个参数，依此类推，这意味着您将丢失除第一个之外的所有结果。

jQuery 的实现早于原生 Promise，他们是这样设计的，现在他们必须坚持下去。这就是生活。

【讨论】：

await $.when(…).then((...results) => results) 可以工作，但我同意，jQuery 承诺很奇怪，应该避免。
但这在 IE11 中不起作用。 ;）那好吧。无论如何，如果有Promise.all() 可用，就没有太多理由反对$.when() 的实现，在任何支持解构的环境中都是如此。
…甚至支持async/await :-D

【解决方案2】：

你不能使用await，但实际上我发现 jQuery 的方式非常直观，甚至是它们传递值的方式

var d1 = $.Deferred();
var d2 = $.Deferred();
var d3 = $.Deferred();

$.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {
  // v1, v2 and v3 output the resolve
  // of d1, d2 and d3 respectively
  console.log( v1, v2, v3 ); 
});

// done method of $.when will just run when
// all deferred functions are resolved, 
// that is, after two seconds
setTimeout(()=>{d1.resolve()},1000);
setTimeout(()=>{d2.resolve("abc")},2000);
d3.resolve( 1, 2, 3, 4, 5 );

console.log('Begin...')

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：