如何更好的编写js async函数


Posted in Javascript onMay 13, 2018

2018年已经到了5月份,node的4.x版本也已经停止了维护我司的某个服务也已经切到了8.x,目前正在做koa2.x的迁移将之前的generator全部替换为async但是,在替换的过程中,发现一些滥用async导致的时间上的浪费 所以来谈一下,如何优化async代码,更充分的利用异步事件流 杜绝滥用async

首先,你需要了解Promise

Promise是使用async/await的基础,所以你一定要先了解Promise是做什么的

Promise是帮助解决回调地狱的一个好东西,能够让异步流程变得更清晰。

 一个简单的Error-first-callback转换为Promise的例子:

const fs = require('fs')
function readFile (fileName) {
 return new Promise((resolve, reject) => {
  fs.readFile(fileName, (err, data) => {
   if (err) reject(err)

   resolve(data)
  })
 })
}
readFile('test.log').then(data => {
 console.log('get data')
}, err => {
 console.error(err)
})

我们调用函数返回一个Promise的实例,在实例化的过程中进行文件的读取,当文件读取的回调触发式,进行Promise状态的变更,resolved或者rejected状态的变更我们使用then来监听,第一个回调为resolve的处理,第二个回调为reject的处理。

async与Promise的关系

async函数相当于一个简写的返回Promise实例的函数,效果如下:

function getNumber () {
 return new Promise((resolve, reject) => {
  resolve(1)
 })
}
// =>
async function getNumber () {
 return 1
}

两者在使用上方式上完全一样,都可以在调用getNumber函数后使用then进行监听返回值。 以及与async对应的await语法的使用方式:

getNumber().then(data => {
 // got data
})
// =>
let data = await getNumber()

await的执行会获取表达式后边的Promise执行结果,相当于我们调用then获取回调结果一样。 P.S. 在async/await支持度还不是很高的时候,大家都会选择使用generator/yield结合着一些类似于co的库来实现类似的效果

async函数代码执行是同步的,结果返回是异步的

async函数总是会返回一个Promise的实例 这点儿很重要所以说调用一个async函数时,可以理解为里边的代码都是处于new Promise中,所以是同步执行的而最后return的操作,则相当于在Promise中调用resolve:

async function getNumber () {
 console.log('call getNumber()')

 return 1
}
getNumber().then(_ => console.log('resolved'))
console.log('done')
// 输出顺序:
// call getNumber()
// done
// resolved

Promise内部的Promise会被消化

也就是说,如果我们有如下的代码:

function getNumber () {
 return new Promise(resolve => {
  resolve(Promise.resolve(1))
 })
}
getNumber().then(data => console.log(data)) // 1

如果按照上边说的话,我们在then里边获取到的data应该是传入resolve中的值 ,也就是另一个Promise的实例。
 但实际上,我们会直接获得返回值:1,也就是说,如果在Promise中返回一个Promise,实际上程序会帮我们执行这个Promise,并在内部的Promise状态改变时触发then之类的回调。
 一个有意思的事情:

function getNumber () {
 return new Promise(resolve => {
  resolve(Promise.reject(new Error('Test')))
 })
}
getNumber().catch(err => console.error(err)) // Error: Test

如果我们在resolve中传入了一个reject,则我们在外部则可以直接使用catch监听到。
这种方式经常用于在async函数中抛出异常 如何在async函数中抛出异常:

async function getNumber () {
 return Promise.reject(new Error('Test'))
}
try {
 let number = await getNumber()
} catch (e) {
 console.error(e)
}

一定不要忘了await关键字

如果忘记添加await关键字,代码层面并不会报错,但是我们接收到的返回值却是一个Promise

let number = getNumber()
console.log(number) // Promise

所以在使用时一定要切记await关键字

let number = await getNumber()
console.log(number) // 1

不是所有的地方都需要添加await

在代码的执行过程中,有时候,并不是所有的异步都要添加await的。 比如下边的对文件的操作:

我们假设fs所有的API都被我们转换为了Promise版本

let number = await getNumber()
console.log(number) // 1

我们通过await打开一个文件,然后进行两次文件的写入。

但是注意了,在两次文件的写入操作前边,我们并没有添加await关键字。
 因为这是多余的,我们只需要通知API,我要往这个文件里边写入一行文本,顺序自然会由fs来控制
 然后我们在最后使用await来关闭这个文件。
 因为如果我们上边在执行写入的过程还没有完成时,close的回调是不会触发的,
 也就是说,回调的触发就意味着上边两步的write已经执行完成了。

合并多个不相干的async函数调用

如果我们现在要获取一个用户的头像和用户的详细信息(而这是两个接口 虽说一般情况下不太会出现)

async function getUser () {
 let avatar = await getAvatar()
 let userInfo = await getUserInfo()

 return {
  avatar,
  userInfo
 }
}

这样的代码就造成了一个问题,我们获取用户信息的接口并不依赖于头像接口的返回值。
 但是这样的代码却会在获取到头像以后才会去发送获取用户信息的请求。
 所以我们对这种代码可以这样处理:

async function getUser () {
 let [avatar, userInfo] = await Promise.all([getAvatar(), getUserInfo()])

 return {
  avatar,
  userInfo
 }
}

这样的修改就会让getAvatar与getUserInfo内部的代码同时执行,同时发送两个请求,在外层通过包一层Promise.all来确保两者都返回结果。

让相互没有依赖关系的异步函数同时执行

一些循环中的注意事项

forEach

当我们调用这样的代码时:

async function getUsersInfo () {
 [1, 2, 3].forEach(async uid => {
  console.log(await getUserInfo(uid))
 })
}
function getuserInfo (uid) {
 return new Promise(resolve => {
  setTimeout(_ => resolve(uid), 1000)
 })
}
await getUsersInfo()

这样的执行好像并没有什么问题,我们也会得到1、2、3三条log的输出,但是当我们在await getUsersInfo()下边再添加一条console.log('done')的话,就会发现:

 我们会先得到done,然后才是三条uid的log,也就是说,getUsersInfo返回结果时,其实内部Promise并没有执行完。
 这是因为forEach并不会关心回调函数的返回值是什么,它只是运行回调。

不要在普通的for、while循环中使用await

使用普通的for、while循环会导致程序变为串行:

for (let uid of [1, 2, 3]) {
 let result = await getUserInfo(uid)
}

这样的代码运行,会在拿到uid: 1的数据后才会去请求uid: 2的数据

--------------------------------------------------------------------------------

关于这两种问题的解决方案:

目前最优的就是将其替换为map结合着Promise.all来实现:

await Promise.all([1, 2, 3].map(async uid => await getUserInfo(uid)))

这样的代码实现会同时实例化三个Promise,并请求getUserInfo

P.S. 草案中有一个await*,可以省去Promise.all

await Promise.all([1, 2, 3].map(async uid => await getUserInfo(uid)))

P.S. 为什么在使用Generator+co时没有这个问题

在使用koa1.x的时候,我们直接写yield [].map是不会出现上述所说的串行问题的看过co源码的小伙伴应该都明白,里边有这么两个函数(删除了其余不相关的代码):

function toPromise(obj) {
 if (Array.isArray(obj)) return arrayToPromise.call(this, obj);
 return obj;
}
function arrayToPromise(obj) {
 return Promise.all(obj.map(toPromise, this));
}

co是帮助我们添加了Promise.all的处理的(膜拜TJ大佬)。

总结

总结一下关于async函数编写的几个小提示:

1.使用return Promise.reject()在async函数中抛出异常
2.让相互之间没有依赖关系的异步函数同时执行
3.不要在循环的回调中/for、while循环中使用await,用map来代替它

参考资料

1.async-function-tips

总结

以上所述是小编给大家介绍的如何更好的编写js async函数,希望对大家有所帮助如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
原生js开发的日历插件
Feb 04 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 #jQuery
在angular 6中使用 less 的实例代码
May 13 #Javascript
深入理解JS的事件绑定、事件流模型
May 13 #Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 #Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 #Javascript
node 命令方式启动修改端口的方法
May 12 #Javascript
安装Node.js并启动本地服务的操作教程
May 12 #Javascript
You might like
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
jquery操作checkbox示例分享
2014/07/21 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python实现备份目录的方法
2015/08/03 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
Python List cmp()知识点总结
2019/02/18 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
python打印异常信息的两种实现方式
2019/12/24 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
eBay美国官网:eBay.com
2020/10/24 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
店长助理岗位职责
2013/12/13 职场文书
大学校运会广播稿
2014/02/03 职场文书
思想品德课教学反思
2014/02/10 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
家长写给孩子的评语
2014/04/18 职场文书
文化建设工作方案
2014/05/12 职场文书
机关作风建设自查报告
2014/10/22 职场文书
好好学习保证书
2015/02/26 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python