等待 jQuery.when ajax 请求

Posted 2023-02-25

【中文标题】等待 jQuery.when ajax 请求

【英文标题】：await for jQuery.when ajax requests

【发布时间】：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')] )。

【参考方案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...')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>