javascript - 使用 promise/deferred 对异步和同步方法进行高效排序

Question

我正在开发一个使用 API 收集数据然后绘制 html 来表示数据的项目；有 3 种异步方法用于收集数据，当然还有用于绘制 html 的相关同步方法。

我希望在这里得到回复，以帮助我确保我有效地完成这项工作——我将展示的代码有效，因此我的项目不会因与此代码相关的任何问题而受阻，但是我不确定它的功效。

对于 3 种异步方法——我们称它们为 async1、async2、async3(或恭敬地 chop 为 a1、a2、a3)——假设如下:

每个异步返回一个对象数组；然后将 a1 的结果迭代到 a2 和 a3，并将每个异步的所有结果推送到它们自己的“主”数组；然后对生成的数组进行迭代以使用同步方法将 html 内容绘制到页面，这样每个 a1 对象都有自己的容器，其中是来自 a2 的相关对象的容器，其中是来自 a3 的相关对象的容器。

这是我所拥有的伪代码表示(假设所有这些都包含在一个函数中):

//establish master arrays for each async method result
var a1array = [], a2array = [], a3array = [];

//establish Deferreds for each async master array, html
var a1arrDfd = $.Deferred(), a1htmlDfd = $.Deferred();
var a2arrDfd = $.Deferred(), a2htmlDfd = $.Deferred();
var a3arrDfd = $.Deferred(), a3htmlDfd = $.Deferred();

//get a1 data
async1(params).done(fn(a1data) {

  //iterate over a1 return and push to a1 master array
  var i, ilen = a1data.length, idone = 0;
  for (i = 0; i < ilen; i++) {
    a1array.push(a1data[i]);
    idone++;

    //if at last iteration of a1data array,
    //a1's master array is complete
    if (idone === ilen) { a1arrDfd.resolve(); }
  }
}).done(fn(a1data) {
  var j, jlen = a1data.length, jdone = 0;

  //loop thru a1data array to get a2 data and
  //push a2data to a2 master array
  for (j = 0; j < jlen; j++) {
    async2(param + a1data[j].key + param).done(fn(a2data) {
      var k, klen = a2data.length, kdone = 0;
      jdone++;

      //loop thru a2data array to push to a2 master array
      for (k = 0; k < klen; k++) {
        a2array.push(a2data[k]);
        kdone++;

        //if at last a1data iteration and a2data iterant,
        //a2's master array is complete
        if (jdone === jlen && kdone === klen) { a2arrDfd.resolve(); }
      }
    });
  }
}).done(fn(a1data) {
  var l, llen = a1data.length, ldone = 0;

  //loop thru a1data array to get a3 data and
  //push a3data to a3 master array
  for (l = 0; l < llen; l++) {
    async3(param + a1data[l].key + param).done(fn(a3data) {
      var m, mlen = a3data.length, mdone = 0;
      ldone++;

      //loop thru a3data array to push to a3 master array
      for (m = 0; m < mlen; m++) {
        a3array.push(a3data[m]);
        mdone++;

        //if at last a1data iteration and a3data iterant
        //a3's master array is complete
        if (ldone === llen && mdone === mlen) { a3arrDfd.resolve(); }
      }
    });
  }
});

//listen for completion of async1array, then
//paint html containers for each object in async1 array
$.when(a1arrDfd).done(fn() {
  var n, nlen = a1array.length, ndone = 0;
  for (n = 0; n < nlen; n++) {
    a1paintHtml;
    ndone++;

    //if at last a1array iteration,
    //a1's html painting is complete
    if (ndone === nlen) { a1htmlDfd.resolve(); }
  }
});

//listen for completion of async1 html containers and
//async2 array, then paint containers for
//each object in async2 array
$.when(a1htmlDfd, a2arrDfd).done(fn() {
  var o, olen = a2array.length, odone = 0;
  for (o = 0; o < olen; o++) {
    a2paintHtml;
    odone++;

    //if at last a2array iteration,
    //a2's html painting is complete
    if (odone === olen) { a2htmlDfd.resolve(); }
  }
});

//listen for completion of async2 html containers and
//async3 array, then paint containers for
//each object in async3 array
$.when(a2htmlDfd, a3arrDfd).done(fn() {
  var p, plen = a3array.length, pdone = 0;
  for (p = 0; p < plen; p++) {
    a3paintHtml;
    pdone++;

    //if at last a3array iteration,
    //a3's html painting is complete
    if (pdone === plen) { a3htmlDfd.resolve(); }
  }
});

注意:如果您倾向于使用 setTimeout 进行响应，请解释原因——在我看来，使用 setTimeout 方法似乎很武断，尤其是在考虑如何确定将什么用作延迟参数时，因此您需要教育我在这方面的假设是如何不正确的。

提前感谢您的任何建议

Answer 1

经过将近 2 个月的时间后，我重新审视了这个项目，有了更多关于 JS 中 Promises 的知识，现在有了以下内容，它摆脱了延迟反模式:

const a1array = [], a2array = [], a3array = [];

const a1get = async1(params).then(data => {
  a1array.push(...data);
  return a1array;
})

const a2get = a1get.then(a1data =>
  Promise.all(a1data.map(a1 =>
    async2(param + a1.key + param)
      .then(data => a2array.push(...data)))));

const a3get = a1get.then(a1data =>
  Promise.all(a1data.map(a1 =>
    async3(param + a1.key + param)
      .then(data => a3array.push(...data)))));

Promise.all([a1get, a2get, a3get]).then(() => {
  a1paintHtml();
  a2paintHtml();
  a3paintHtml();
});