时间戳

首页 > 解决方案 > 知道数组的 jqXHR 何时全部完成

javascript - 知道数组的 jqXHR 何时全部完成

问题描述

jqXHR一旦数组的所有元素都完成（成功或失败），我正在尝试运行一些代码。

你可以在这里看到完整的代码：http: //jsfiddle.net/Lkjcrdtz/4/

基本上我期待always从这里的钩子：

$.when
    .apply(undefined, reqs)
    .always(function(data) {
      console.log('ALL ALWAYS', data);
    });

当堆积在那里的所有请求成功或失败时运行。目前，您可以在之前记录的控制台中进行观察ALL ALWAYS。

标签： javascriptjqueryajaxes6-promise

解决方案

现代浏览器的一个简单解决方案是使用较新的fetch()APIPromise.all()

var makeReq = function(url, pos) {
  var finalUrl = url + pos;

  // intentionally make this request a failed one
  if (pos % 2 === 0) {
    finalUrl = "https://jsonplaceholder.typicode.com/423423rfvzdsv";
  }

  return fetch(finalUrl).then(function(resp) {
    console.log('Request for user #', pos);
    //  if successful request return data promise otherwise return something
    //  that can be used to filter out in final results
    return resp.ok ? resp.json() : {error: true, status: resp.status, id: pos }
  })
};

// mock API
var theUrl = "https://jsonplaceholder.typicode.com/users/";
var reqs = [];

for (var i = 1; i <= 5; i++) {
  reqs.push(makeReq(theUrl, i));
}

Promise.all(reqs).then(function(results) {
  console.log('---- ALL DONE ----')
  // filter out good requests
  results.forEach(function(o) {
    if (o.error) {
      console.log(`No results for user #${o.id}`);
    } else {
      console.log(`User #${o.id} name = ${o.name}`);
    }
  })
})

推荐阅读