资讯专栏INFORMATION COLUMN

如何更好的编写async函数

isaced / 458人阅读

摘要:一个简单的转换为的例子我们调用函数返回一个的实例,在实例化的过程中进行文件的读取,当文件读取的回调触发式,进行状态的变更,或者状态的变更我们使用来监听,第一个回调为的处理,第二个回调为的处理。

2018年已经到了5月份,node4.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版本

async function writeFile () {
  let fd = await fs.open("test.log")
  fs.write(fd, "hello")
  fs.write(fd, "world")
  return fs.close(fd)
}

就像上边说的,Promise内部的Promise会被消化,所以我们在最后的close也没有使用await
我们通过await打开一个文件,然后进行两次文件的写入。
但是注意了,在两次文件的写入操作前边,我们并没有添加await关键字。
因为这是多余的,我们只需要通知API,我要往这个文件里边写入一行文本,顺序自然会由fs来控制 。
最后再进行close,因为如果我们上边在执行写入的过程还没有完成时,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
  }
}

这样的修改就会让getAvatargetUserInfo内部的代码同时执行,同时发送两个请求,在外层通过包一层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()

这样的执行好像并没有什么问题,我们也会得到123三条log的输出,
但是当我们在await getUsersInfo()下边再添加一条console.log("done")的话,就会发现:
我们会先得到done,然后才是三条uidlog,也就是说,getUsersInfo返回结果时,其实内部Promise并没有执行完。
这是因为forEach并不会关心回调函数的返回值是什么,它只是运行回调。

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

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

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* [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函数编写的几个小提示:

使用return Promise.reject()async函数中抛出异常

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

不要在循环的回调中/forwhile循环中使用await,用map来代替它

参考资料

async-function-tips

本人GitHub: jiasm 欢迎小伙伴们follow、交流

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94941.html

相关文章

  • async/await 更好异步解决方案

    摘要:大家都一直在尝试使用更好的方案来解决这些问题。这是一个用同步的思维来解决异步问题的方案。当我们发出了请求,并不会等待响应结果,而是会继续执行后面的代码,响应结果的处理在之后的事件循环中解决。我们可以用一个两人问答的场景来比喻异步与同步。 在实际开发中总会遇到许多异步的问题,最常见的场景便是接口请求之后一定要等一段时间才能得到结果,如果遇到多个接口前后依赖,那么问题就变得复杂。大家都一直...

    Ali_ 评论0 收藏0
  • 【面试篇】寒冬求职季之你必须要懂原生JS(中)

    摘要:如果你还没读过上篇上篇和中篇并无依赖关系,您可以读过本文之后再阅读上篇,可戳面试篇寒冬求职季之你必须要懂的原生上小姐姐花了近百个小时才完成这篇文章,篇幅较长,希望大家阅读时多花点耐心,力求真正的掌握相关知识点。 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了裁员措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力。 一年前,也许你搞清楚闭包,this,原型链,就能获得...

    andycall 评论0 收藏0
  • JavaScript是如何工作:事件循环和异步编程崛起+ 5种使用 async/await 更

    摘要:事件循环从回调队列中获取并将其推入调用堆栈。执行从调用堆栈中移除从调用堆栈中移除快速回顾值得注意的是,指定了事件循环应该如何工作,这意味着在技术上它属于引擎的职责范围,不再仅仅扮演宿主环境的角色。 此篇是 JavaScript是如何工作的第四篇,其它三篇可以看这里: JavaScript是如何工作的:引擎,运行时和调用堆栈的概述! JavaScript是如何工作的:深入V8引擎&编写...

    Honwhy 评论0 收藏0
  • 【全文】狼叔:如何正确学习Node.js

    摘要:感谢大神的免费的计算机编程类中文书籍收录并推荐地址,以后在仓库里更新地址,声音版全文狼叔如何正确的学习简介现在,越来越多的科技公司和开发者开始使用开发各种应用。 说明 2017-12-14 我发了一篇文章《没用过Node.js,就别瞎逼逼》是因为有人在知乎上黑Node.js。那篇文章的反响还是相当不错的,甚至连著名的hax贺老都很认同,下班时读那篇文章,竟然坐车的还坐过站了。大家可以很...

    Edison 评论0 收藏0
  • 【全文】狼叔:如何正确学习Node.js

    摘要:感谢大神的免费的计算机编程类中文书籍收录并推荐地址,以后在仓库里更新地址,声音版全文狼叔如何正确的学习简介现在,越来越多的科技公司和开发者开始使用开发各种应用。 说明 2017-12-14 我发了一篇文章《没用过Node.js,就别瞎逼逼》是因为有人在知乎上黑Node.js。那篇文章的反响还是相当不错的,甚至连著名的hax贺老都很认同,下班时读那篇文章,竟然坐车的还坐过站了。大家可以很...

    fengxiuping 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<