重学JS：控制异步操作的执行顺序

问题背景

有三个请求，每一个请求的何时返回结果不可预知，取决于服务器的处理情况。现在要求，三个请求按照先后次序执行。

方案模型

将所有的请求统一包装成 promise，便于接下来的统一处理。

function factory(ajax) {
  return Promise.resolve(ajax);
}
复制代码

ajax请求需要按照一定的顺序执行，先执行前一个，前一个执行完毕了，再执行后一个。由于 promise 可以链式调用。因此，应该按照既定的顺序构造一个执行链。在形式结构上

prev.then(curr).then(handler);
复制代码

curr的执行必须等到prev的状态确定。prev的状态确定后，开始执行 curr，curr 的执行结果会作为 handler的参数。

function deal_by_order(ajaxs = []) {
  const resp = [];
  return ajaxs.reduce(function(prev, curr) {
    return prev.then(curr).then(function(data) {
      resp.push(data);
      return resp;
    });
  }, Promise.resolve());
}
复制代码

reduce 是 JS 中一个重要的函数，累计计数。

测试代码

const time = (timer) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, timer);
  });
};
const ajax1 = () =>
  time(2000).then(() => {
    console.log(1);
    return 1;
  });
const ajax2 = () =>
  time(1000).then(() => {
    console.log(2);
    return 2;
  });
const ajax3 = () =>
  time(1000).then(() => {
    console.log(3);
    return 3;
  });
复制代码

deal_by_order([ajax1, ajax2, ajax3]).then((data) => {
  console.log("done");
  console.log(data); // data 为 [1, 2, 3]
});
复制代码