[译] 六个 Async/Await 取代 Promises 的原因

澳门新浦京娱乐游戏 4

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

Async/Await简介

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

原文链接:https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9

[编者按]:貌似嵌入 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之后再执行。

如果你错过了,那么 Node 7.6 开始支持 async/await
了。如果你还没有尝试过它,这里有一大堆理由和例子告诉你为什么要不顾一切的直接使用它。

Async/await 101

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

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

为什么Async/Await更好?

[更新]:Node 8
LTS
已经发布,完整支持 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 101

Async/await 101

对于那些还没有听说过这篇文章主题的人,这篇文章可以带你快速入门。

  • Async/await
    是一种编写异步代码的新方法。曾经编写异步代码都使用回调函数和
    promise。
  • Async/await 是建立在 promise 之上的,它不能被用作回调函数。
  • Async/await 像 promise 一样是非阻塞的。
  • Async/await 使得异步代码看上去更像是同步代码,这就是它最强大的地方

为什么 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)
  }
}

语法

假设一个 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. 在我们的函数之前有 async 关键字,await 关键字只能在定义了 async
    的函数中使用。所有的 async function 都会默认的返回一个 promise
    对象,promise 中的 resolve 值就是异步函数返回的值。(例子中是
    ‘done’)
  2. 以上几点表明我们不能在代码顶层使用 await,因为它并不在一个 async
    function 内。

// 该行在顶层,无法执行
// await makeRequest()

// 该行可以执行
makeRequest().then((result) => {
  // do something
})
  1. await getJSON() 表示 console.log 等到 getJSON() 的 promise
    执行结束后执行,并打印它的值。

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语句很容易让人看不懂。

使用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    
  }
}

为什么它更好

2. 错误处理

Async/await
会最终让我们用同样的结构( try/catch)处理同步和异步代码变成可能。在下面使用
promise
的示例中,如果 JSON.parse 失败的话,try/catch 就不会处理,因为它是发生在一个
prmoise 中。我们需要在 promise
上调用 .catch,并且重复错误处理代码。这种错误处理代码会比可用于生产的代码中的 console.log 更复杂。

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

现在看看用 async/await 实现的代码。现在 catch 块会处理解析错误。

const makeRequest = async () => { 
  try { // 这个解析会失败   
    const data = JSON.parse(await getJSON()) console.log(data) 
  } 
  catch (err) { 
    console.log(err)
  }
}

4. 中间值

你可能遇到过这样的场景,调用promise1,使用promise1返回的结果调用promise2,然后使用两者的结果调用promise3。使用promise的代码是:

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

如何promise3不使用value1,可以很简单的将promise铺平。如果忍受不了嵌套,可以将value1
& value2放进Promise.all来避免深层嵌套:

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

这种方法为了可读性牺牲了语义,除了避免嵌套,并没有其他理由将value1和value2放在一个数组中。

使用async/await的话,代码会变得异常简单和直观:

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

1. 简洁明了

看看有多少代码不需要写了!即使在上面精心设计的例子中,我们也清楚地保存了大量的代码。我们不需要编写
.then,创建一个匿名函数来处理响应,或者给不需要使用的变量一个名字’data’。我们还避免了代码嵌套。在下面这个例子中,这些小优点很快的一点点累加,变得更明显。

// 译注:作者似乎遗漏了这里的例子,翻译时这里使用了上文中已有的例子
const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}

makeRequest()

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

这些代码看着就让人头疼。它只需将最终结果传播到主
promise,却很容易让我们迷失在嵌套( 6 层)、大括号和返回语句中。

把这个示例用async / await 重写,就变得更易于阅读。

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

5. 错误栈

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

上述示例中调用了多个promise,假设promise链中某个地方抛出了一个异常,返回的错误栈没有给出错误发生的位置信息。

async/await中的错误栈会指向错误所在的函数:

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

在开发过程中,可能这一点优势并不是很大。但是,如果是分析生产环境的错误日志时,它将非常有用。

2. 错误处理

Async/await 使得可以建立一个传统的 try/catch
就能够同时处理同步和异步错误。在下面的示例中使用 promise,当 JSON.parse
失败时,try/catch 无法处理其中的错误,因为错误发生在 promise
内部。我们需要在 promise 上调用 .catch
并复制我们的错误处理代码。时不会因为它在保证发生JSON.parse失败处理。我们需要打电话,赶在承诺和重复我们的错误处理代码,在你编写完成的代码中,这(理想的)比
console.log 更复杂。

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

现在,来看看 async/await 写的相同的代码。现在,catch
块将会处理解析错误。

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

4. 中间值

你可能发现自己处于一种状态,即调用你
promise1,然后用它的返回值来调用promise2,然后使用这两个 promise
的结果来调用 promise3。你的代码很可能看起来像这样:

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

如果 promise3 不需要 value1,那么很容易就可以把 promise
嵌套变扁平一点。如果你是那种无法忍受的人,那么可能就会像下面这样,在一个 Promise.all中包含值
1 和 2,并避免更深层次的嵌套:

onst makeRequest = () => {  
    return promise1()  
        .then(value1 => {  
            // do something  
            return Promise.all([value1, promise2(value1)])  
        })  
    .then(([value1, value2]) => {  
        // do something  
        return promise3(value1, value2)  
    })  
}

这种方法为了可读性而牺牲了语义。除了为了避免 promise
嵌套,没有理由将 value1value2并入一个数组。

不过用 async/await
的话,同样的逻辑就变得超级简单直观了。这会让你对你拼命让 promise
看起来不那么可怕的时候所做过的所有事情感到怀疑。

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

6. 调试

async/await能够使代码更方便调试。
promise调试非常痛苦:

  • 不能在返回表达式的箭头函数中设置断点

const makeRequest = () => {
    return callAPromise()
      .then(() => callAPromise())
      .then(() => callAPromise())
      .then(() => callAPromise())
      .then(() => callAPromise())
}
  • 如果在.then代码块中设置断点,使用Step
    Over快捷键,调试器不会调到下一个.then,因为它只会跳过异步代码。

使用async/await时,不再需要那么多箭头函数,这样就可以像调试同步代码一样跳过await语句。

const makeRequest = async () => {
    await callAPromise()
    await callAPromise()
    await callAPromise()
    await callAPromise()
}

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层)中,很容易丢失括号和那些用来向
promise 传播最终结果的 return 语句。
当我们用 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
  }
}

5. 错误栈

假如有一段链式调用多个 promise 的代码,在链的某个地方抛出一个错误。

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

从 promise
链返回的错误栈没有发现错误发生在哪里的线索。更糟糕的是,这是误导的;它包含的唯一的函数名是callAPromise,它完全与此错误无关(不过文件和行号仍然有用)。

但是,来自async / await的错误栈会指向包含错误的函数:

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

当在本地环境中开发并在编辑器中打开文件时,这不是啥大事,但是当想搞清楚来自生产服务器的错误日志时,就相当有用了。在这种情况下,知道错误发生在makeRequest中比知道错误来自一个又一个的 then 要好。

4. 中间量

你可能发现,当你调用 promise1 而后使用它的返回值调用
promise2,之后在使用前两个 promise 的结果调用 promise3
时,你的代码很可能像这样:

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

如果 promise3 不需要 value1,可以很简单的将 promise
展开成一个很小的嵌套,如果你不喜欢这样写,你可以把 value1 和 value2
放到一个 Promise.all 中以避免深度的嵌套,像这样:

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

这个方法为了可读性牺牲了语义。这里没有理由将 value1 和 value2
放在同一个数组里,仅仅是为了避免 promise 嵌套。
同样的逻辑配合 async/await 变得非常简单和直观。在你努力让 promise
看上去不那么无聊的时间里,你惊讶的发现所有的事情都已经完成。

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

6. 调试

最后但是同样重要的是,在使用 async/await
时,一个杀手级优势是调试更容易。调试 promise
一直是如此痛苦,有两个原因:

1.没法在返回表达式(无函数体)的箭头函数中设置断点。

澳门新浦京娱乐游戏 1

试着在此处设置断点

2.如果在.then块中设置断点,并使用像单步调试这类调试快捷方式,调试器不会移动到后面的 .then ,因为它只单步调试同步代码。

有了
async/await,我们就不再需要那么多箭头函数,您可以像正常的同步调用一样单步调试
await 调用。

澳门新浦京娱乐游戏 2

5. 错误攻击

想象一块代码链式地调用了许多 promise,但其中某个地方抛出了一个错误。

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

错误栈从 promise
链中返回,但被没有关于哪里发生了错误的线索。更糟糕的是,这具有误导性,它所包含的唯一函数名是
callAPromise
,这个函数名和错误毫无关系(文件和行号的仍然是有用的)。
然而,async/await 的错误栈会指向包含错误的函数。

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

当您在本地环境中开发并在编辑器中打开文件时,这并不是一个巨大的好处,但是当您试图理解来自您的生产服务器的错误日志时,它是非常有用的。在这种情况下,了解错误发生在
makeRequest 比知道错误来自一个 then 之后的 then 之后的 then …… 更好。

总结

Async/await 是过去几年中添加到 JavaScript
中的最具革命性的功能之一。它让我们意识到 promise
的语法有多混乱,并提供了直观的替代。

6. 调试

最后一点,依然很重要,async/await
是调试的的杀手锏,使用起来十分轻松。调试 promise 十分痛苦有 2 个原因:

  1. 你无法在返回表达式的箭头函数中设置断点(没有函数体)

澳门新浦京娱乐游戏 3

试图设置断点

  1. 如果你在一个 .then
    块中设置断点,并且使用如单步调试这样的调试快捷方式,调试器不会移动到下一个
    .then,因为它仅仅可以一步步的走过同步代码。
    通过 async/await 你就不需要那些箭头函数了,你可以单步通过 await
    调用,确切来将就像同步调用一样。

澳门新浦京娱乐游戏 4

结论

Async/await 是过去几年已经被加入 JavaScript
中十分具有革命性的特性之一。它使得你可实现 大量异步的 promise
,并提供一种直接的代替方案。

关注

在你使用这个特性的时候可能会报有一些怀疑。它是的异步代码变得不明确:我们知道当我们用眼睛看到一个回调函数或者
.then
的时候就会判断这是段异步代码。我们需要几周的时间来让我们的的眼睛适应这些新的符号,但
C# 已经有这个特点多年,熟悉的人就知道这很小的、暂时的不便是值得的。
Node 7 并不是长期支持的发布版:是的,Node 8
下个月即将来了,并且把你的代码移植的新版本将不费吹灰之力。[更新]: Node
8 LTS 已经来了.

关注原作者 twitter @imgaafar

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图