友情提醒:NodeJS自从7.6版开始已经内置了对async/await的支持。如果你还没用过该特性,那么接下来我会给出一系列的原因解释为何你应该立即开始使用它并且会结合示例代码说明。

async/await快速入门

为了让还没听说过这个特性的小伙伴们有一个大致了解,以下是一些关于该特性的简要介绍:

  • async/await是一种编写异步代码的新方法。在这之前编写异步代码使用的是回调函数和promise。
  • async/await实际是建立在promise之上的。因此你不能把它和回调函数搭配使用。
  • async/await和promise一样,是非阻塞的。
  • async/await可以使异步代码在形式上更接近于同步代码。这就是它最大的价值。

语法

假设有一个getJSON方法,它返回一个promise,该promise会被resolve为一个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()

使用async/await时有以下几个区别:

  1. 在定义函数时我们使用了async关键字。await关键字只能在使用async定义的函数的内部使用。所有async函数都会返回一个promise,该promise最终resolve的值就是你在函数中return的内容。
  2. 由于第一点中的原因,你不能在顶级作用域中await一个函数。因为顶级作用域不是一个async方法。

    // this will not work in top level
    // await makeRequest() // this will work
    makeRequest().then((result) => {
    // do something
    })
  3. await getJSON()意味着直到getJSON()返回的promise在resolve之后,console.log才会执行并输出resolove的值。

为何使用async/await编写出来的代码更好呢?

1. 简洁

看看我们节省了多少代码吧。即使是在这么一个简单的例子中,我们也节省了可观的代码。我们不需要为.then编写一个匿名函数来处理返回结果,也不需要创建一个data变量来保存我们实际用不到的值。我们还避免了代码嵌套。这些小优点会在真实项目中变得更加明显。

2. 错误处理

async/await终于使得用同一种构造(古老而好用的try/catch) 处理同步和异步错误成为可能。在下面这段使用promise的代码中,try/catch不能捕获JSON.parse抛出的异常,因为该操作是在promise中进行的。要处理JSON.parse抛出的异常,你需要在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代码块现在可以捕获JSON.parse抛出的异常了:

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

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层),空格,返回语句中。

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

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封装在一个Promsie.all调用中以避免深层次的嵌套:

const 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编写就会非常简单,直观。

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

5. 异常堆栈

假设有一段串行调用多个promise的代码,在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调用会有意义的多。

6. 调试

最后压轴的一点,使用async/await最大的优势在于它很容易被调试。由于以下两个原因,调试promise一直以来都是很痛苦的。

  1. 你不能在一个返回表达式的箭头函数中设置断点(因为没有代码块)

  2. 如果你在一个.then代码块中使用调试器的步进(step-over)功能,调试器并不会进入后续的.then代码块,因为调试器只能跟踪同步代码的『每一步』。

    通过使用async/await,你不必再使用箭头函数。你可以对await语句执行步进操作,就好像他们都是普通的同步调用一样。

结论

async/await是过去几年中JavaScript引入的最具革命性的特性之一。它使你意识到promise在语法上的糟糕之处,并提供了一种简单,直接的替代方案。

疑虑

一些你在使用此特性可能出现的疑虑:

  • 它使得异步代码不那么明显了:我们的眼睛已经学会了通过寻找回调函数或.then来发现异步代码,因此需要一段时间来适应新的标识符。C#中已经内置此特性多年了,熟悉的人都知道这只是一个小小的,暂时的不便。
  • Node 7不是一个LTS发布版:是的,但是Node 8将在下个月发布。同时,迁移你的代码到最新版本可能根本不需要任何代价。

6个Async/Await完胜Promise的原因的更多相关文章

  1. JavaScript 的 Async\/Await 完胜 Promise 的六

    参考:http://www.10tiao.com/html/558/201705/2650964601/1.html Node 现在从版本 7.6 开始就支持 async/await 了. 简介: A ...

  2. JavaScript异步编程——Async/Await vs Promise

    兼容性 提醒一下各位,Node 现在从版本 7.6 开始就支持 async/await 了.而就在前几天,Node 8已经正式发布了,你可以放心地使用它. 如果你还没有试过它,这里有一堆带有示例的理由 ...

  3. Async/Await替代Promise的6个理由

    译者按: Node.js的异步编程方式有效提高了应用性能:然而回调地狱却让人望而生畏,Promise让我们告别回调函数,写出更优雅的异步代码:在实践过程中,却发现Promise并不完美:技术进步是无止 ...

  4. 8张图让你一步步看清 async/await 和 promise 的执行顺序

    摘要: 面试必问 原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序 作者:ziwei3749 Fundebug经授权转载,版权归原作者所有. 为什么写这篇文章? 说实 ...

  5. 8 张图帮你一步步看清 async/await 和 promise 的执行顺序(转)

    https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651555491&idx=1&sn=73779f84c289d9 ...

  6. [转] Async/Await替代Promise的6个理由

    Node.js 7.6已经支持async/await了,如果你还没有试过,这篇博客将告诉你为什么要用它. Async/Await简介 对于从未听说过async/await的朋友,下面是简介: asyn ...

  7. async/await actor promise 异步编程

    Python协程:从yield/send到async/await http://blog.guoyb.com/2016/07/03/python-coroutine/ Async/Await替代Pro ...

  8. 关于async/await、promise和setTimeout执行顺序

    先来一道关于async/await.promise和setTimeout的执行顺序的题目: async function async1() { console.log('async1 start'); ...

  9. js异步回调Async/Await与Promise区别 新学习使用Async/Await

    Promise,我们了解到promise是ES6为解决异步回调而生,避免出现这种回调地狱,那么为何又需要Async/Await呢?你是不是和我一样对Async/Await感兴趣以及想知道如何使用,下面 ...

随机推荐

  1. Java 语言特性

    介绍以下几种语言特性: Java5的特性 1.静态引用 2.可变参数 3.自动装箱和拆箱  包装类的缓存设计 4.枚举 一.静态引用(语法糖,不推荐使用,了解一下即可) 先看看普通的引用,就是impo ...

  2. python Bootstarp框架和inconfont、font-awesome使用

    http://www.bootcss.com/ http://www.runoob.com/bootstrap/bootstrap-panels.html  查找基本的没问题 https://www. ...

  3. C#实现的系统内存清理

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  4. 正则表达式基于JavaScript的入门详解

    关于正则表达式,和很多前辈聊起这个知识点时,他们的反馈都比聊其他技术谦逊,而和很多刚入门的程序员讨论时甚至会有觉得你看不起他. 的确,正则表达式从通常的应用来看,的确不难,比如电话,邮箱等验证.语法, ...

  5. Nginx 之六: Nginx服务器的正向及反向代理功能

    一:Nginx作为正向代理服务器: 1.正向代理:代理(proxy)服务也可以称为是正向代理,指的是将服务器部署在公司的网关,代理公司内部员工上外网的请求,可以起到一定的安全作用和管理限制作用,正向代 ...

  6. Ganglia 入门介绍及解决fsockopen error: Connection refused问题

    一,问题描述 Ganglia的各个组件安装情况(不是我装的,只知道这些信息): 集群一共有4台机器,分别是192.168.121.34-37.Gmetad.Gweb和httpd 安装在 192.168 ...

  7. electron-vue项目搭建

    参考:https://simulatedgreg.gitbooks.io/electron-vue/content/cn/getting_started.html 1. cnpm install -g ...

  8. request和reponse

  9. qt5下载与安装,VS2017的环境配置

    下载地址  http://download.qt.io/archive/qt/ 安装 选择安装路径 ,只有没有中文即可 二.Qt与VS2017相关联 1.打开VS2017,选择工具 - 拓展和更新 2 ...

  10. luogu P4931 情侣?给我烧了!

    双倍经验 传送门 首先坐在一起的cp和不坐在一起的cp是相对独立的,可以分开考虑,然后方案数相乘 坐在一起的cp,方案为\(\binom{n}{k}*\binom{n}{k}*k!*2^k\).首先选 ...