摘要:以往的异步方法无外乎回调函数和。当然,对这个新特性也有一定的担心,体现在他使得异步代码变的不再明显,我们好不容易已经学会并习惯了使用回调函数或者来处理异步。
自从Node的7.6版本,已经默认支持async/await特性了。如果你还没有使用过他,或者对他的用法不太了解,这篇文章会告诉你为什么这个特性“不容错过”。本文辅以大量实例,相信你能很轻松的看懂,并了解Javascript处理异步的一大杀器。
文章灵感和内容借鉴了6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial),英文好的同学可以直接戳原版参考。
初识Async/await对于还不了解Async/await特性的同学,下面一段是一个“速成”培训。
Async/await 是Javascript编写异步程序的新方法。以往的异步方法无外乎回调函数和Promise。但是Async/await建立于Promise之上。对于Javascript处理异步,是个老生常谈却历久弥新的话题:
从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。它们都有额外的复杂性,都需要理解抽象的底层运行机制。
异步编程的最高境界,就是根本不用关心它是不是异步。
async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案。
Async/await语法试想一下,我们有一个getJSON方法,该方法发送一个异步请求JSON数据,并返回一个promise对象。这个promise对象的resolve方法传递异步获得的JSON数据。具体例子的使用如下:
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关键字。在函数体内,使用了await关键字。当然await关键字只能出现在用async声明的函数体内。该函数会隐式地返回一个Promise对象,函数体内的return值,将会作为这个Promise对象resolve时的参数。
可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
2)示例中,await getJSON() 说明console.log的调用,会等到getJSON()返回的promise对象resolve之后触发。
我们在看一个例子加强一下理解,该例子取自阮一峰大神的《ECMAScript 6 入门》一书:
function timeout(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } async function asyncPrint(value, ms) { await timeout(ms); console.log(value); } asyncPrint("hello world", 50);
上面代码指定50毫秒以后,输出hello world。
Async/await究竟好在哪里?那么,同样是处理异步操作,Async/await究竟好在哪里呢?
我们总结出以下6点。
我们看一下上面两处代码的代码量,就可以直观地看出使用Async/await对于代码量的节省是很明显的。对比Promise,我们不需要书写.then,不需要新建一个匿名函数处理响应,也不需要再把数据赋值给一个我们其实并不需要的变量。同样,我们避免了耦合的出现。这些看似很小的优势其实是很直观的,在下面的代码示例中,将会更加放大。
错误处理Error handlingAsync/await使得处理同步+异步错误成为了现实。我们同样使用try/catch结构,但是在promises的情况下,try/catch难以处理在JSON.parse过程中的问题,原因是这个错误发生在Promise内部。想要处理这种情况下的错误,我们只能再嵌套一层try/catch,就像这样:
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处理,一切变得简单,解析中的错误也能轻而易举的解决:
const makeRequest = async () => { try { // this parse may fail const data = JSON.parse(await getJSON()) console.log(data) } catch (err) { console.log(err) } }条件判别Conditionals
想象一下这样的业务需求:我们需要先拉取数据,然后根据得到的数据判断是否输出此数据,或者根据数据内容拉取更多的信息。如下:
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 } }中间值Intermediate values
一个经常出现的场景是,我们先调起promise1,然后根据返回值,调用promise2,之后再根据这两个Promises得值,调取promise3。使用Promise,我们不难实现:
const makeRequest = () => { return promise1() .then(value1 => { // do something return promise2(value1) .then(value2 => { // do something return promise3(value1, value2) }) }) }
如果你难以忍受这样的代码,我们可以优化我们的Promise,方案是使用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) }) }
Promise.all这个方法牺牲了语义性,但是得到了更好的可读性。
但是其实,把value1 & value2一起放到一个数组中,是很“蛋疼”的,某种意义上也是多余的。
同样的场景,使用async/await会非常简单:
const makeRequest = async () => { const value1 = await promise1() const value2 = await promise2(value1) return promise3(value1, value2) }错误堆栈信息Error stacks
想象一下我们链式调用了很多promises,一级接一级。紧接着,这条promises链中某处出错,如下:
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) })
此链条的错误堆栈信息并没用线索指示错误到底出现在哪里。更糟糕的事,他还会误导开发者:错误信息中唯一出现的函数名称其实根本就是无辜的。
我们再看一下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) })
也许这样的对比,对于在本地开发阶段区别不是很大。但是想象一下在服务器端,线上代码的错误日志情况下,将会变得非常有意义。你一定会觉得上面这样的错误信息,比“错误出自一个then的then的then。。。”有用的多。
调试Debugging最后一点,但是也是很重要的一点,使用async/await来debug会变得非常简单。
在一个返回表达式的箭头函数中,我们不能设置断点,这就会造成下面的局面:
const makeRequest = () => { return callAPromise() .then(()=>callAPromise()) .then(()=>callAPromise()) .then(()=>callAPromise()) .then(()=>callAPromise()) }
我们无法在每一行设置断点。但是使用async/await时:
const makeRequest = async () => { await callAPromise() await callAPromise() await callAPromise() await callAPromise() }总结
Async/await是近些年来JavaScript最具革命性的新特性之一。他让读者意识到使用Promise存在的一些问题,并提供了自身来代替Promise的方案。
当然,对这个新特性也有一定的担心,体现在:
他使得异步代码变的不再明显,我们好不容易已经学会并习惯了使用回调函数或者.then来处理异步。新的特性当然需要时间成本去学习和体会;
退回来说,熟悉C#语言的程序员一定会懂得这些学习成本是完全值得的。
Happy Coding!
PS: 作者Github仓库,欢迎通过代码各种形式交流。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82492.html
摘要:以往的异步方法无外乎回调函数和。当然,对这个新特性也有一定的担心,体现在他使得异步代码变的不再明显,我们好不容易已经学会并习惯了使用回调函数或者来处理异步。 自从Node的7.6版本,已经默认支持async/await特性了。如果你还没有使用过他,或者对他的用法不太了解,这篇文章会告诉你为什么这个特性不容错过。本文辅以大量实例,相信你能很轻松的看懂,并了解Javascript处理异步的...
摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...
摘要:之前我们已经开发过一款小程序适用的音乐库,这次开发网易云音乐库的原因是音乐库在小程序中环境下无法使用小程序提供的背景音频播放器播放的问题网易云的加密算法真的比其他几家复杂太多了。。。 之前我们已经开发过一款小程序适用的qq音乐api库https://github.com/FisherWY/Q...,这次开发网易云音乐api库的原因是qq音乐api库在小程序中iOS环境下无法使用小程序提...
摘要:示例运行函数弹出弹出函数接收参数,返回值。其中,返回一个对象,是的返回值,代表函数是否执行完成。 ES6特性介绍(下) ES6新的标准,新的语法特征:1、变量/赋值2、函数3、数组/json4、字符串5、面向对象6、Promise7、generator8、ES7:async/await 《【Web全栈课程二】ES6特性介绍(上)》见:https://segmentfault.com/a...
阅读 450·2023-04-25 17:26
阅读 1477·2021-08-05 09:58
阅读 1925·2019-08-30 13:17
阅读 926·2019-08-28 17:52
阅读 1041·2019-08-26 18:27
阅读 1397·2019-08-26 14:05
阅读 3589·2019-08-26 14:05
阅读 1558·2019-08-26 10:45