javascript - 在我做某事之前，如何确保 X 数量的 XHR 回调已经触发并完成？

Question

所以我有这 4 个请求，每个请求都有自己的回调，并且可以按照他们想要的任何顺序触发。但我需要在执行 mergeData 之前，请求的所有回调都已成功完成。

我现在使用的方法的问题是，一旦我调用 waitForSync 参数中的初始值永远不会刷新(而且我对这种方法感觉不太舒服，我觉得我正在做错了)。有人能给我指出正确的方向吗？

var heroes = requestDataFromAPI('heroes');
var weapons = requestDataFromAPI('weapons');
var races = requestDataFromAPI('races');
var jobs = requestDataFromAPI('jobs');

waitForSync(heroes, weapons, races, jobs);

...

function waitForSync(heroes, weapons, races, jobs){
  if (heroes && weapons && races && jobs) {
    mergeData(heroes, weapons, races, jobs);
  }
  else {
    setTimeout(waitForSync, '500', heroes, weapons, races, jobs);
  }
}

Answer 1

它们的类型是什么？它们是普通的 XHR 对象吗？ jQuery XHR？无论哪种方式，他们每个人都将评估为 true当强制转换为 bool 值时，条件也将是 true .

您可以更改代码以检查 readystate 并增加一个计数器，但我会采取不同的方法并使用 Q promises相反。

您甚至可以通过这种方式轻松处理错误，

例如(假设 requestDataFromAPI 返回一个 jQuery XHR):

// First, convert jQuery XHRs to Q promises

var heroesPromise = Q(requestDataFromAPI('heroes'));
var weaponsPromise = Q(requestDataFromAPI('weapons'));
var racesPromise = Q(requestDataFromAPI('races'));
var jobsPromise = Q(requestDataFromAPI('jobs'));

// Now, wait for all of them to finish

Q.all([heroesPromise, weaponsPromise, racesPromise, jobsPromise])
  .spread(function (heroes, weapons, races, jobs) {
    // Do something with results!
    console.log(heroes, weapons, races, jobs);    
  })
  .catch(function (err) {
    console.log('Something bad happened', err);
  })
  .done();

如果您还不熟悉 promise，帮自己一个忙， read up on them 。它们是我所知道的最简单的异步抽象，并且可以避免很多复杂性。你会很高兴你做到了。

链接的文章讨论了 native promise ，但在所有浏览器中都可用之前，您需要求助于像 Q 这样的库。 .还值得知道:don't use jQuery promises, they are bad (这就是为什么我将它们包装在 Q() 调用中)。