异步async/await相比于Promise的优势

[ZhengXingchi]

• 代码读起来更加同步，Promise虽然摆脱了回调地狱，但是then的链式调用也会带来额外的阅读负担
• Promise传递中间值非常麻烦，而async/await几乎是同步的写法，非常优雅
• 错误处理友好，async/await可以用成熟的try/catch，Promise的错误捕获非常冗余
• 调试友好，Promise的调试很差，由于没有代码块，你不能在一个返回表达式的箭头函数中设置断点，如果你在一个.then代码块中使用调试器的步进(step-over)功能，调试器并不会进入后续的.then代码块，因为调试器只能跟踪同步代码的『每一步』。

[ZhengXingchi]

参考文章

如何在Promise链中共享变量？ Async/Await替代Promise的6个理由

[ZhengXingchi]

关于Promise与async/await错误处理

Async/Await 让 try/catch 可以同时处理同步和异步错误。在下面的 promise 示例中，try/catch 不能处理 JSON.parse 的错误，因为它在 Promise 中。我们需要使用.catch，这样错误处理代码非常冗余。并且，在我们的实际生产代码会更加复杂。

Promise

    const makeRequest = () => {
      try {
        getJSON().then(result => {
          // JSON.parse可能会出错
          const data = JSON.parse(result);
          console.log(data);
        });
        // 取消注释，处理异步代码的错误
        // .catch((err) => {
        //   console.log(err)
        // })
      } catch (err) {
        console.log(err);
      }
    };  

async/await

   const makeRequest = async () => {
      try {
        // this parse may fail
        const data = JSON.parse(await getJSON());
        console.log(data);
      } catch (err) {
        console.log(err);
      }
    };

[ZhengXingchi]

Promise传递中间值的痛苦

promise3只需要value2

   const makeRequest = () => {
      return promise1().then(value1 => {
        return value1
      })
        .then(value1 => {
          return promise2(value1)
        })
        .then(value2 => {
          return promise3(value2)
        });
    };

当Promise3需要value1和value2

  const makeRequest = () => {
      return promise1().then(value1 => {
        return promise2(value1).then(value2 => {
          return promise3(value1, value2)
        })
      })
    };

刚从嵌套出来又进入嵌套了，地狱啊。这时候你会心一笑，机智如我，写出以下代码

  const makeRequest = () => {
      return promise1().then(value1 => {
        return Promise.all([value1, promise2(value1)])
      })
        .then(([value1, value2]) => {
        })
    };

这时候我就想一嘴的汽水喷死你，你这不是高射炮打苍蝇（多此一举） 吗？杀鸡焉用牛刀呢。 这种方法为了可读性牺牲了语义。除了避免嵌套，并没有其他理由将 value1 和 value2 放在一个数组中。 好到用在刀刃上，这时候async/await闪亮登场，当当当。。。

    const makeRequest = async () => {
      const value1 = await promise1();
      const value2 = await promise2(value1);
      return promise3(value1, value2);
    };