巧妙的通过promise.all节省接口的响应时间

在业务中难免会出现需要等待三四个接口返回之后再处理后续的代码，这个时候一般都会使用async/await来进行处理，那么就会有一个问题：

先通过promise来模拟三个接口定时模拟每个接口需要花费的时间。

  componentDidMount() {
    this.PageInit();
  }

  PageInit = async () => {
    const oldTime = moment();
    const fetch = async () => {
      const res1 = await new Promise((resolve, reject) => {
        setTimeout(resolve, 2000, 'fo0');
      });
      const res2 = await new Promise((resolve, reject) => {
        setTimeout(resolve, 3000, 'fo1');
      });
      const res3 = await new Promise((resolve, reject) => {
        setTimeout(resolve, 4000, 'fo2');
      });
      return [res1, res2, res3];
    };
    const res = await fetch();
    const newTime = moment();
    const seconds = newTime.diff(oldTime, 'seconds');
    const Timestamp = newTime.diff(oldTime);
    console.log(res);
    console.log(seconds, Timestamp);
  }

这个时间花费的时间是9s、9000毫秒左右，如图：

通过promise.all来优化一下代码，如图：

PageInit = async () => {
    const oldTime = moment();
    const fetch = async () => {
      const res = await Promise.all([
        new Promise((resolve, reject) => {
          setTimeout(resolve, 2000, 'fo0');
        }),
        new Promise((resolve, reject) => {
          setTimeout(resolve, 3000, 'fo1');
        }),
        new Promise((resolve, reject) => {
          setTimeout(resolve, 4000, 'fo2');
        }),
      ]);
      return res;
    };
    const res = await fetch();
    const newTime = moment();
    const seconds = newTime.diff(oldTime, 'seconds');
    const Timestamp = newTime.diff(oldTime);
    console.log(res);
    console.log(seconds, Timestamp);
  }

这个时候实际花费的时间就是4s,如图:

这里实际是通过promise.all来生成一个新的promise，让接口达到异步请求，间接的节省了请求时间。

注意：如果说必须要等第一个await走完再进行第二个await再进行第三个await然后走后面的代码，那样的话就不能用promise.all了，promise.all各个请求之间都为异步。