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

提醒一下各位,Node 现在从版本 7.6 开始就支持 async/await
了。如果你还没有试过它,这里有一堆带有示例的理由来说明为什么你应该马上采用它,并且再也不会回头。

Async/Await简介

  • async/await是写异步代码的新方式,以前的方法有回调函数和Promise。
  • async/await是基于Promise实现的,它不能用于普通的回调函数。
  • async/await与Promise一样,是非阻塞的。
  • async/await使得异步代码看起来像同步代码,这正是它的魔力所在。

[编者按]:貌似嵌入 gist 上的代码在 medium 原生 app
中不行,但是在移动浏览器上可以。如果你是在 app
中读本文,请点击共享图标,选择“在浏览器中打开”,才看得到代码片段。

Async/Await语法

Promise写法:

const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log(data)
      return "done"
    })
makeRequest()

Async/Await写法:

const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}
makeRequest()

示例中,getJSON函数返回一个promise,这个promise成功resolve时会返回一个promise对象。我们只是调用这个函数,打印返回的JSON对象,然后返回“done”。

它们有一些细微不同:

  • 函数前面多了一个async关键字。await关键字只能用在async定义的函数内。async函数会隐式的返回一个promise,该promise的resolve值就是函数return的值。(示例中resolve值就是字符串”done”)
  • 第1点暗示我们不能在最外层代码中使用await,因为不在async函数内。

//不能在最外层代码中使用await
await makeRequest()

//这是会出事的
makeRequest().then((result) => {
  //代码
})

await
getJSON()表示console.log会等到getJSON的promise成功reosolve之后再执行。

Async/await 101

对于那些从未听说过这个话题的人来说,如下是一个简单的介绍:

  • Async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和
    promise。
  • Async/await 实际上是建立在 promise 的基础上。它不能与普通回调或者
    node 回调一起用。
  • Async/await 像 promise 一样,也是非阻塞的。
  • Async/await
    让异步代码看起来、表现起来更像同步代码。这正是其威力所在。

为什么Async/Await更好?

语法

假设函数 getJSON 返回一个promise,而该promise的完成值是一些JSON对象。我们只想调用它,并输出该JSON,然后返回"done"

如下是用 promise 实现的代码:

const makeRequest = () =>  
  getJSON()  
    .then(data => {  
    console.log(data)  
  return "done"  
})  

makeRequest()

而这就是用async/await看起来的样子:

const makeRequest = async () => {  
    console.log(await getJSON())  
    return "done"  
}  

makeRequest()

这里有一些区别:

1.函数前面有一个关键字 asyncawait 关键字只用在用 async 定义的函数内。所有 async函数都会隐式返回一个
promise,而 promise 的完成值将是函数的返回值(本例中是 "done")。

2.上面一点暗示我们不能在代码的顶层用 await,因为这样就不是在 async 函数内。

// 这段代码在顶层不能执行  
// await makeRequest()  

// 这段代码可以执行  
makeRequest().then((result) => {  
    // do something  
})

3.await getJSON() 意味着 console.log 调用会一直等待,直到 getJSON() promise
完成并打印出它的值。

1. 简洁

由示例可知,使用Async/Await明显节约了不少代码。我们不需要写.then,不需要写匿名函数处理Promise的resolve值,也不需要定义多余的data变量,还避免了嵌套代码。这些小的优点会迅速累计起来,这在之后的代码示例中会更加明显。

为什么 Async/await 更好?

2. 错误处理

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

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)
  }
}

使用aync/await的话,catch能处理JSON.parse错误:

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

1. 简洁干净

看看我们少写了多少代码!即使在上面那个人为的示例中,很显然我们也是节省了不少代码。我们不必写 .then,创建一个匿名函数来处理响应,或者给不需要用的变量一个名称 data。我们还避免了代码嵌套。这些小小的优势会快速累积起来,在后面的代码中会变得更明显。

3. 条件语句

下面示例中,需要获取数据,然后根据返回数据决定是直接返回,还是继续获取更多的数据。

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
      }
    })
}

上面的代码嵌套(6层)、括号、return语句很容易让人看不懂。

澳门新葡亰3522平台游戏,使用Async/Await编写:

const 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    
  }
}