敲黑板!async/await应用和原理

这个篇文章是由async/await继发引起。在JS开发中通过for循环或者for..of配合async/await,既可以实现继发执行(就是按顺序完成异步操作)。具体原因后续再聊,先上示例代码。

async/await继发运行

好的!我们先来看下面的示例代码:

function syncTime(delay, res) {
    return new Promise((resolve, reject)=> {
        setTimeout(()=> {
            resolve(res);
        }, delay)
    })
}

async function main() {
    for(let i=0 ;i<10; i++){
        let res = await syncTime(1000, i)
        console.log(`%c ${res}`, `color: red;`);
    }
}
main();

运行结果:会打印0...9,每停顿1秒打印一次。你可以运行试试,是否是这个结果。如果把syncTime函数中的setTimeout替换为异步请求,那么它就可以直接用到项目中;或者通过上面的操作来阻塞代码,让它进入睡眠状态。

在之前我只是把async/await作为Promise的升级版来使用,根本不知道有这个操作的,在同事使用后,我翻阅了大神阮一峰 ECMAScript 6 入门,才发现这个操作早已经有了,这并不是什么稀罕玩意,只是我没有发现而已。😂😂以后还是要多看文档,多看资料!!

async/await只是Promise的升级版嘛?看到上面的代码,或者已经知道这个特性的同学,肯定会回答不是。应该说,它算是Promise+Generator的共同结合版。

async/await实现原理

以上文中的代码为示例,我们来看看函数调用时发生了什么?

在循环中每次都会触发下列的过程:调用syncTime函数,return出一个Promise实例,在delayms后Promise实例状态由padding变为resolved,代码继续运行,console再打印数字;循环遍历10次。

等等!!不是应该先直接打印console,然后才是运行setTimeout,Js的Event Loop怎么在这里失效了!到底发生了什么,导致先运行setTimeout,再运行console?下面让我们来看看。

async/await和生成器

ing...

目前不知道怎么组织语言,算是懒吧,暂时可以参考下面的文章👇

ES6中的Iterator迭代器

Promise

关于Promise的解析之前写过一篇文章,可以借鉴,Promise运行流程可以参考

Promise代码解析

ing...

ps: 微信公众号:Yopai,有兴趣的可以关注,每周不定期更新。不断分享,不断进步

上次更新: 7/25/2020, 9:20:49 AM

评 论: