前言
async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代码,从而影响执行效率。下面将简单地描述一下一些日常常用场景,加深对 async/await 认识
最普遍的异步操作就是请求,我们也可以用 setTimeOut 来简单模拟异步请求。
场景1. 一个请求接着一个请求
相信这个场景是最常遇到,后一个请求依赖前一个请求,下面以爬取一个网页内的图片为例子进行描述,使用了 superagent 请求模块, cheerio 页面分析模块,图片的地址需要分析网页内容得出,所以必须按顺序进行请求。
const request = require('superagent') const cheerio = require('cheerio') // 简单封装下请求,其他的类似 function getHTML(url) { // 一些操作,比如设置一下请求头信息 return superagent.get(url).set('referer', referer).set('user-agent', userAgent) } // 下面就请求一张图片 async function imageCrawler(url) { let res = await getHTML(url) let html = res.text let $ = cheerio.load(html) let $img = $(selector)[0] let href = $img.attribs.src res = await getImage(href) retrun res.body } async function handler(url) { let img = await imageCrawler(url) console.log(img) // buffer 格式的数据 // 处理图片 } handler(url)
上面就是一个简单的获取图片数据的场景,图片数据是加载进内存中,如果只是简单的存储数据,可以用流的形式进行存储,以防止消耗太多内存。
其中 await getHTML 是必须的,如果省略了 await 程序就不能按预期得到结果。执行流程会先执行 await 后面的表达式,其实际返回的是一个处于 pending 状态的 promise,等到这个 promise 处于已决议状态后才会执行 await 后面的操作,其中的代码执行会跳出 async 函数,继续执行函数外面的其他代码,所以并不会阻塞后续代码的执行。
场景2.并发请求
有的时候我们并不需要等待一个请求回来才发出另一个请求,这样效率是很低的,所以这个时候就需要并发执行请求任务。下面以一个查询为例,先获取一个人的学校地址和家庭住址,再由这些信息获取详细的个人信息,学校地址和家庭住址是没有依赖关系的,后面的获取个人信息依赖于两者
async function infoCrawler(url, name) { let [schoolAdr, homeAdr] = await Promise.all([getSchoolAdr(name), getHomeAdr(name)]) let info = await getInfo(url + `"htmlcode">let imageUrls = ['href1', 'href2', 'href3'] async function saveImages(imageUrls) { await Promise.all(imageUrls.map(async imageUrl => { let img = await getImage(imageUrl) return await saveImage(img) })) console.log('done') }// 如果我们连存储是否全部完成也不关心,也可以这么写 let imageUrls = ['href1', 'href2', 'href3'] // saveImages() 连 async 都省了 function saveImages(imageUrls) { imageUrls.forEach(async imageUrl => { let img = await getImage(imageUrl) saveImage(img) }) }可能有人会疑问 forEach 不是不能用于异步吗,这个说法我也在刚接触这个语法的时候就听说过,很明显 forEach 是可以处理异步的,只是是并发处理,map 也是并发处理,这个怎么用主要看你的实际场景,还要看你是否对结果感兴趣
场景3.错误处理
一个请求发出,可以会遇到各种问题,我们是无法保证一定成功的,报错是常有的事,所以处理错误有时很有必要, async/await 处理错误也非常直观, 使用 try/catch 直接捕获就可以了
async function imageCrawler(url) { try { let img = await getImage(url) return img } catch (error) { console.log(error) } }// imageCrawler 返回的是一个 promise 可以这样处理 async function imageCrawler(url) { let img = await getImage(url) return img } imageCrawler(url).catch(err => { console.log(err) })可能有人会有疑问,是不是要在每个请求中都 try/catch 一下,这个其实你在最外层 catch 一下就可以了,一些基于中间件的设计就喜欢在最外层捕获错误
async function ctx(next) { try { await next() } catch (error) { console.log(error) } }场景4. 超时处理
一个请求发出,我们是无法确定什么时候返回的,也总不能一直傻傻的等,设置超时处理有时是很有必要的
function timeOut(delay) { return new Promise((resolve, reject) => { setTimeout(() => { reject(new Error('不用等了,别傻了')) }, delay) }) } async function imageCrawler(url,delay) { try { let img = await Promise.race([getImage(url), timeOut(delay)]) return img } catch (error) { console.log(error) } }这里使用 Promise.race 处理超时,要注意的是,如果超时了,请求还是没有终止的,只是不再进行后续处理。当然也不用担心,后续处理会报错而导致重新处理出错信息, 因为 promise 的状态一经改变是不会再改变的
场景5. 并发限制
在并发请求的场景中,如果需要大量并发,必须要进行并发限制,不然会被网站屏蔽或者造成进程崩溃
async function getImages(urls, limit) { let running = 0 let r let p = new Promise((resolve, reject) => { r = resolve }) function run() { if (running < limit && urls.length > 0) { running++ let url = urls.shift(); (async () => { let img = await getImage(url) running-- console.log(img) if (urls.length === 0 && running === 0) { console.log('done') return r('done') } else { run() } })() run() // 立即到并发上限 } } run() return await p }总结
以上列举了一些日常场景处理的代码片段,在遇到比较复杂场景时,可以结合以上的场景进行组合使用,如果场景过于复杂,最好的办法是使用相关的异步代码控制库。如果想更好地了解 async/await 可以先去了解 promise 和 generator, async/await 基本上是 generator 函数的语法糖,下面简单的描述了一下内部的原理。
function delay(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(time) }, time) }) } function *createTime() { let time1 = yield delay(1000) let time2 = yield delay(2000) let time3 = yield delay(3000) console.log(time1, time2, time3) } let iterator = createTime() console.log(iterator.next()) console.log(iterator.next(1000)) console.log(iterator.next(2000)) console.log(iterator.next(3000)) // 输出 { value: Promise { <pending> }, done: false } { value: Promise { <pending> }, done: false } { value: Promise { <pending> }, done: false } 1000 2000 3000 { value: undefined, done: true }可以看出每个 value 都是 Promise,并且通过手动传入参数到 next 就可以设置生成器内部的值,这里是手动传入,我只要写一个递归函数让其自动添进去就可以了
function run(createTime) { let iterator = createTime() let result = iterator.next() function autoRun() { if (!result.done) { Promise.resolve(result.value).then(time => { result = iterator.next(time) autoRun() }).catch(err => { result = iterator.throw(err) autoRun() }) } } autoRun() } run(createTime)promise.resove 保证返回的是一个 promise 对象 可迭代对象除了有 next 方法还有 throw 方法用于往生成器内部传入错误,只要生成内部能捕获该对象,生成器就可以继承运行,类似下面的代码
function delay(time) { return new Promise((resolve, reject) => { setTimeout(() => { if (time == 2000) { reject('2000错误') } resolve(time) }, time) }) } function *createTime() { let time1 = yield delay(1000) let time2 try { time2 = yield delay(2000) } catch (error) { time2 = error } let time3 = yield delay(3000) console.log(time1, time2, time3) }可以看出生成器函数其实和 async/await 语法长得很像,只要改一下 async/await 代码片段就是生成器函数了
async function createTime() { let time1 = await delay(1000) let time2 try { time2 = await delay(2000) } catch (error) { time2 = error } let time3 = await delay(3000) console.log(time1, time2, time3) } function transform(async) { let str = async.toString() str = str.replace(/async\s+(function)\s+/, '$1 *').replace(/await/g, 'yield') return str }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]