es9-526互联

1. 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 毫秒后成功！！！

但是想要这个结果
3000 毫秒后成功！！！
1000 毫秒后成功！！！
2000 毫秒后成功！！！

第一时间肯定想到的是 async/await

function fn(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time}毫秒后成功！！！`);
    }, time);
  });
}

async function asyncFn() {
  // 排队
  const data1 = await fn(3000);
  console.log(data1); // 3秒后 3000毫秒后成功！！！
  const data2 = await fn(1000);
  console.log(data2); // 再过1秒 1000毫秒后成功！！！
  const data3 = await fn(2000);
  console.log(data3); // 再过2秒 2000毫秒后成功！！！
}

但是上面代码也是有缺点的，如果有几十个，那不是得写几十个 await，有没有一种方法可以通过循环来输出呢？

function fn(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time}毫秒后成功！！！`);
    }, time);
  });
}

async function asyncFn() {
  const arr = [fn(3000), fn(1000), fn(1000), fn(2000), fn(500)];
  for await (let x of arr) {
    console.log(x);
  }
}

asyncFn();

3000 毫秒后成功！！！
1000 毫秒后成功！！！
1000 毫秒后成功！！！
2000 毫秒后成功！！！
500 毫秒后成功！！！

2. Promise.finally

新增的 Promise 方法，无论失败或者成功状态，都会执行这个函数

// cheng
new Promise((resolve, reject) => {
  resolve("成功喽");
})
  .then(
    (res) => {
      console.log(res);
    },
    (err) => {
      console.log(err);
    }
  )
  .finally(() => {
    console.log("是finally");
  });

new Promise((resolve, reject) => {
  reject("失败喽");
})
  .then(
    (res) => {
      console.log(res);
    },
    (err) => {
      console.log(err);
    }
  )
  .finally(() => {
    console.log("是finally");
  });