回想到之前写的一段嵌套代码，巨丑！之前不太确认能否行得通，现在做个Marking，简单复盘如下：

接口（异步）嵌套执行优化

代码如下：

const p1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 2000);
  });
};

const p2 = (val) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(val + 2);
    }, 2000);
  });
};
const p3 = (val) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(val * 10);
    }, 2000);
  });
};

// 平常写法
p1().then((res1) => {
  console.log(res1);
  p2(res1).then((res2) => {
    console.log(res2);
    p3(res2).then((res3) => {
      console.log(res3);
      console.log("异步同步化执行");
    });
  });
});

// 简化写法（避免嵌套）
let asyncFn = async () => {
  const res1 = await p1();
  console.log(res1);
  const res2 = await p2(res1);
  console.log(res2);
  const res3 = await p3(res2);
  console.log(res3);
  console.log("异步同步化执行");
};
asyncFn();

这里有个注意点，await的返回值是成功时的返回值，而一旦出错就报错了！所以try...catch的应用场景就出现了

// 简化写法（避免嵌套）
let asyncFn = async () => {
  try {
    const res1 = await p1();
    console.log(res1);
    const res2 = await p2(res1);
    console.log(res2);
    const res3 = await p3(res2);
    console.log(res3);
    console.log("异步同步化执行");
  } catch (error) {
    console.log("请求出错", error);
  }
};

效果如下：