JavaScript 的 Async/Await 完胜 Promise 的六个理由

   <p>提醒一下各位，Node 现在从版本 7.6 开始就支持 async/await 了。如果你还没有试过它，这里有一堆带有示例的理由来说明为什么你应该马上采用它，并且再也不会回头。</p>    <p>[编者按]：貌似嵌入 gist 上的代码在 medium 原生 app 中不行，但是在移动浏览器上可以。如果你是在 app 中读本文，请点击共享图标，选择“在浏览器中打开”，才看得到代码片段。</p>    <h3>Async/await 101</h3>    <p>对于那些从未听说过这个话题的人来说，如下是一个简单的介绍：</p>    <ul>     <li>Async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。</li>     <li>Async/await 实际上是建立在 promise 的基础上。它不能与普通回调或者 node 回调一起用。</li>     <li>Async/await 像 promise 一样，也是非阻塞的。</li>     <li>Async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。</li>    </ul>    <h3>语法</h3>    <p>假设函数 getJSON 返回一个 promise ，而该 promise 的完成值是一些JSON对象。我们只想调用它，并输出该JSON，然后返回 "done" 。</p>    <p>如下是用 promise 实现的代码：</p>    <pre>  <code class="language-javascript">const makeRequest = () =>      getJSON()        .then(data => {        console.log(data)      return "done"    })      makeRequest()</code></pre>    <p>而这就是用 async/await 看起来的样子：</p>    <pre>  <code class="language-javascript">const makeRequest = async () => {        console.log(await getJSON())        return "done"    }      makeRequest()</code></pre>    <p>这里有一些区别：</p>    <ol>     <li>函数前面有一个关键字 async 。 await 关键字只用在用 async 定义的函数内。所有 async 函数都会隐式返回一个 promise，而 promise 的完成值将是函数的返回值（本例中是 "done" ）。</li>     <li>上面一点暗示我们不能在代码的顶层用 await ，因为这样就不是在 async 函数内。</li>    </ol>    <pre>  <code class="language-javascript">// 这段代码在顶层不能执行    // await makeRequest()      // 这段代码可以执行    makeRequest().then((result) => {        // do something    })</code></pre>    <p>3. await getJSON() 意味着 console.log 调用会一直等待，直到 getJSON() promise 完成并打印出它的值。</p>    <h3>为什么 Async/await 更好？</h3>    <p>1. 简洁干净</p>    <p>看看我们少写了多少代码！即使在上面那个人为的示例中，很显然我们也是节省了不少代码。我们不必写 .then ，创建一个匿名函数来处理响应，或者给不需要用的变量一个名称 data 。我们还避免了代码嵌套。这些小小的优势会快速累积起来，在后面的代码中会变得更明显。</p>    <p>2. 错误处理</p>    <p>Async/await 会最终让我们用同样的结构（ try/catch ）处理同步和异步代码变成可能。在下面使用 promise 的示例中，如果 JSON.parse 失败的话， try/catch 就不会处理，因为它是发生在一个 prmoise 中。我们需要在 promise 上调用 .catch ，并且重复错误处理代码。这种错误处理代码会比可用于生产的代码中的 console.log 更复杂。</p>    <pre>  <code class="language-javascript">const makeRequest = () => {      try {        getJSON()            .then(result => {            // this parse may fail            const data = JSON.parse(result)            console.log(data)        })        // uncomment this block to handle asynchronous errors      // .catch((err) => {        // console.log(err)        // })      } catch (err) {        console.log(err)      }    }</code></pre>    <p>现在看看用 async/await 实现的代码。现在 catch 块会处理解析错误。</p>    <pre>  <code class="language-javascript">const makeRequest = async () => {     try { // 这个解析会失败         const data = JSON.parse(await getJSON()) console.log(data)     }     catch (err) {       console.log(err)    }  }</code></pre>    <p>3. 条件句</p>    <p>假设想做像下面的代码一样的事情，获取一些数据，并决定是否应该返回该数据，或者根据数据中的某些值获取更多的细节。</p>    <pre>  <code class="language-javascript">const makeRequest = () => {      return getJSON()            .then(data => {            if (data.needsAnotherRequest) {                return makeAnotherRequest(data)                        .then(moreData => {                        console.log(moreData)                return moreData            })            } else {                console.log(data)                return data            }      })    }</code></pre>    <p>这些代码看着就让人头疼。它只需将最终结果传播到主 promise，却很容易让我们迷失在嵌套（ 6 层）、大括号和返回语句中。</p>    <p>把这个示例用async / await 重写，就变得更易于阅读。</p>    <pre>  <code class="language-javascript">onst makeRequest = async () => {      const data = await getJSON()      if (data.needsAnotherRequest) {        const moreData = await makeAnotherRequest(data);        console.log(moreData)        return moreData      } else {        console.log(data)        return data      }    }</code></pre>    <p>4. 中间值</p>    <p>你可能发现自己处于一种状态，即调用你 promise1，然后用它的返回值来调用promise2，然后使用这两个 promise 的结果来调用 promise3。你的代码很可能看起来像这样：</p>    <pre>  <code class="language-javascript">const makeRequest = () => {      return promise1()        .then(value1 => {            // do something              return promise2(value1)                .then(value2 => {                // do something                    return promise3(value1, value2)            })          })    }</code></pre>    <p>如果 promise3 不需要 value1 ，那么很容易就可以把 promise 嵌套变扁平一点。如果你是那种无法忍受的人，那么可能就会像下面这样，在一个 Promise.all 中包含值 1 和 2，并避免更深层次的嵌套：</p>    <pre>  <code class="language-javascript">onst makeRequest = () => {        return promise1()            .then(value1 => {                // do something                return Promise.all([value1, promise2(value1)])            })        .then(([value1, value2]) => {            // do something            return promise3(value1, value2)        })    }</code></pre>    <p>这种方法为了可读性而牺牲了语义。除了为了避免 promise 嵌套，没有理由将 value1 和 value2 并入一个数组。</p>    <p>不过用 async/await 的话，同样的逻辑就变得超级简单直观了。这会让你对你拼命让 promise 看起来不那么可怕的时候所做过的所有事情感到怀疑。</p>    <pre>  <code class="language-javascript">const makeRequest = async () => {        const value1 = await promise1()        const value2 = await promise2(value1)        return promise3(value1, value2)    }</code></pre>    <p>5. 错误栈</p>    <p>假如有一段链式调用多个 promise 的代码，在链的某个地方抛出一个错误。</p>    <pre>  <code class="language-javascript">const makeRequest = () => {        return callAPromise()            .then(() => callAPromise())            .then(() => callAPromise())            .then(() => callAPromise())            .then(() => callAPromise())            .then(() => {            throw new Error("oops");        })    }      makeRequest()        .catch(err => {        console.log(err);        // output        // Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)    })</code></pre>    <p>从 promise 链返回的错误栈没有发现错误发生在哪里的线索。更糟糕的是，这是误导的；它包含的唯一的函数名是 callAPromise ，它完全与此错误无关（不过文件和行号仍然有用）。</p>    <p>但是，来自async / await的错误栈会指向包含错误的函数：</p>    <pre>  <code class="language-javascript">const makeRequest = async () => {        await callAPromise()        await callAPromise()        await callAPromise()        await callAPromise()        await callAPromise()        throw new Error("oops");    }      makeRequest()        .catch(err => {        console.log(err);        // output        // Error: oops at makeRequest (index.js:7:9)    })</code></pre>    <p>当在本地环境中开发并在编辑器中打开文件时，这不是啥大事，但是当想搞清楚来自生产服务器的错误日志时，就相当有用了。在这种情况下，知道错误发生在 makeRequest 中比知道错误来自一个又一个的 then 要好。</p>    <p>6. 调试</p>    <p>最后但是同样重要的是，在使用 async/await 时，一个杀手级优势是调试更容易。调试 promise 一直是如此痛苦，有两个原因：</p>    <ol>     <li>没法在返回表达式（无函数体）的箭头函数中设置断点。</li>    </ol>    <p><img src="https://simg.open-open.com/show/cedc47c5c41e1f7f9f5fffee93041626.png"></p>    <p>试着在此处设置断点</p>    <p>2.如果在 .then 块中设置断点，并使用像单步调试这类调试快捷方式，调试器不会移动到后面的 .then ，因为它只单步调试同步代码。</p>    <p>有了 async/await，我们就不再需要那么多箭头函数，您可以像正常的同步调用一样单步调试 await 调用。</p>    <p><img src="https://simg.open-open.com/show/e21e410367d690eabb02792fcdb436a8.png"></p>    <h3>总结</h3>    <p>Async/await 是过去几年中添加到 JavaScript 中的最具革命性的功能之一。它让我们意识到 promise 的语法有多混乱，并提供了直观的替代。</p>    <h3>关注</h3>    <p>您可能对使用此功能有一些正当的怀疑：</p>    <ul>     <li>它让异步代码变得不那么明显：我们的眼睛已经学会了只要看到回调或者 .then 就认出是异步代码，还需要花上几周的时间才能适应新的标志。不过 C＃已经有这个功能多年了，熟悉它的人都知道这是这种小的、暂时的不便是值得的。</li>     <li>Node 7 现在还不是 LTS 版本：是的，不过 Node 8 下个月就会出来，而将我们的代码库迁移到新版本很有可能不费吹灰之力。</li>     <li><a href="/misc/goto?guid=4959749419014992437" rel="nofollow,noindex">JavaScript</a></li>     <li><a href="/misc/goto?guid=4959749419105219148" rel="nofollow,noindex">ES6</a></li>     <li><a href="/misc/goto?guid=4959749419185610106" rel="nofollow,noindex">Asynchronous</a></li>     <li><a href="/misc/goto?guid=4959749419273225702" rel="nofollow,noindex">Nodejs</a></li>     <li><a href="/misc/goto?guid=4959749419354213673" rel="nofollow,noindex">Programming</a></li>    </ul>    <p> </p>    <p>来自：http://www.w3ctech.com/topic/2021</p>    <p> </p>