美文网首页
async、await原理

async、await原理

作者: 小豆soybean | 来源:发表于2021-10-04 16:59 被阅读0次

参考极客时间浏览器工作原理与实战

// 定义了一个promise
function getNum(num) {
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(num+1)
        },0)
    })
}

// 重点 自动执行器
function asyncFun(func) {
    var gen = func();
    function next(data) {
        var result = gen.next(data);
        if (result.done) return result.value;
        result.value.then(function(data) {
            next(data); // 递归调用
        })
    }
    next();
}

var func = function* (){
    var f1 = yield getNum(1);
    var f2 = yield getNum(f1);
    console.log(f2);
}

image.png

图中可以看出来协程的四点规则:
1、通过调用生成器函数 genDemo 来创建一个协程 gen,创建之后,gen 协程并没有立即执行。
2、要让 gen 协程执行,需要通过调用 gen.next。
3、当协程正在执行的时候,可以通过 yield 关键字来暂停 gen 协程的执行,并返回主要信息给父协程。
4、如果协程在执行期间,遇到了 return 关键字,那么 JavaScript 引擎会结束当前协程,并将 return 后面的内容返回给父协程。

生成器就是协程的一种实现方式


//foo函数
function* foo() {
    let response1 = yield fetch('https://www.geekbang.org')
    console.log('response1')
    console.log(response1)
    let response2 = yield fetch('https://www.geekbang.org/test')
    console.log('response2')
    console.log(response2)
}

//执行foo函数的代码
let gen = foo()
function getGenPromise(gen) {
    return gen.next().value
}
getGenPromise(gen).then((response) => {
    console.log('response1')
    console.log(response)
    return getGenPromise(gen)
}).then((response) => {
    console.log('response2')
    console.log(response)
})

以上就是协程和 Promise 相互配合执行的一个大致流程。不过通常,我们把执行生成器的代码封装成一个函数,并把这个执行生成器代码的函数称为执行器(可参考著名的 co 框架),如下面这种方式:

相关文章

  • async/await的深究

    我们都知道async/await是Generator函数的语法糖,为了更加深刻的了解async/await的原理,...

  • async、await

    async、await 的特点,优点和缺点,await 的原理是什么? 一个函数如果加上 async 那么该函数就...

  • async-await 网上看到的记录

    一、走进Async-await原理1、原理1async函数返回一个 Promise 对象,可以使用then方法添加...

  • async和await

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • async await原理

    async/await 的基础使用及原理简介https://www.cnblogs.com/zhengyufeng...

  • async、await原理

    参考极客时间浏览器工作原理与实战 图中可以看出来协程的四点规则:1、通过调用生成器函数 genDemo 来创建一个...

  • ES8(一) —— async&await

    目录 async和普通函数的区别 await async/await处理多回调异步 async和await必须配合...

  • async

    async/await特点 async/await更加语义化,async是“异步”的简写,async functi...

  • ES6中的好东西

    1 Await/Async 前端的回调时代我没有赶上,我赶上的是await/async时代。await和async...

  • Vue接口调用方式(三)async/await用法

    async/await用法 1. async/await的基本用法 async/await是ES7引入的新语法,可...

网友评论

      本文标题:async、await原理

      本文链接:https://www.haomeiwen.com/subject/eenlnltx.html