for await of使用

function fn (time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time}毫秒后我执行！！！`)
    }, time)
  })
}

fn(3000).then(res => console.log(res))
fn(1000).then(res => console.log(res))
fn(2000).then(res => console.log(res))

结果是

1000毫秒后我执行！！！
2000毫秒后我执行！！！
3000毫秒后我执行！！！

如果需要输出的顺序是

1000毫秒后我执行！！！

3000毫秒后我执行！！！

2000毫秒后我执行！！！

首先想到的是async await 实现是可以的 但是会有缺陷如果有好几十个promise或者异步任务 就会写相应数量的 await 代码量变得庞大 臃肿所以使用 for await of 来实现

methods: {
    fn(time) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(`${time}毫秒后我成功啦！！！`);
        }, time);
      });
    },
    async asyncFn() {
      // const data2 = await this.fn(3000);
      // console.log(data2);
      // const data1 = await this.fn(1000);
      // console.log(data1);

      const arr = [
        this.fn(3000),
        this.fn(1000),
        this.fn(1000),
        this.fn(2000),
        this.fn(500),
      ];
      for await (let x of arr) {
        //输出的是一个promise
        console.log(x);
      }
    },
  },
  mounted() {
    this.asyncFn();
  },