首页教程软件教程正文

深入了解async的实现原理

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 979 浏览 2207 个字

摘要 :

文章目录一、异步编程中的难题与现有方案（一）promise解决异步的方式及问题（二）generator处理异步的情况二、async和await的优势三、async的实现原理四、asyn……

文
章
目
录

一、异步编程中的难题与现有方案

（一）promise解决异步的方式及问题
（二）generator处理异步的情况

二、async和await的优势
三、async的实现原理
四、async和await的不足

JavaScript异步编程中我们已经有了promise来处理异步操作，可为何官方还要引入async和await呢？这背后其实有着深层次的考量，接下来就让我们一探究竟。

一、异步编程中的难题与现有方案

在实际开发中，发接口请求是常见的操作。有时，我们需要保证接口请求的顺序，然而各个接口的耗时又不尽相同，这就需要将异步操作“捋”成同步的效果。

（一）promise解决异步的方式及问题

以模拟接口请求为例，下面这段代码展示了使用promise解决异步的方式：

function request (num) { 
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(num * 10)
        }, 1000)
    })
}

// const res1 = request(1)
// const res2 = request(res1)

request(1).then(res1 => {
    console.log(res1);
    request(res1).then(res2 => {
        console.log(res2);
    })
})

上述代码实现了两次接口请求，且第二次请求依赖第一次请求返回的结果。但这种链式调用的方式，代码看起来较为繁琐，不够优雅。

（二）generator处理异步的情况

再来看generator处理异步的方式，以下是模拟三次请求的代码：

function* gen() { // generator处理异步
    const num1 = yield request(1)
    const num2 = yield request(num1)
    const num3 = yield request(num2)
    return num3
}

let g = gen()
const next1 = g.next()
next1.value.then(res1 => {
    console.log(res1);
    const next2 = g.next(res1)
    next2.value.then(res2 => {
        console.log(res2);
        const next3 = g.next(res2)
        next3.value.then(res3 => {
            console.log(res3);
        })
    })
})

可以看到，generator处理异步时，代码同样不美观，调用过程也比较复杂。

二、async和await的优势

async和await的出现，很好地解决了上述问题。下面通过代码来看看它们是如何工作的：

async function fn() {
    const res1 = await request(1) // await会把promise中的resolve值提取出来
    const res2 = await request(res1)
    console.log(res2);
}
fn()

相较于promise的链式调用和generator复杂的调用方式，async和await的代码更加简洁直观，将异步操作写得如同同步操作一般，极大地提高了代码的可读性。

三、async的实现原理

async和await的实现是基于promise和generator的。其中，async关键字会让函数默认返回一个promise对象。如果一个函数接收的参数是函数体，或者返回一个函数体，那么这个函数就是高阶函数，async相关的函数就属于这类。

async的核心其实是generator，只不过在使用generator时，需要手动不断调用next函数，而async通过递归实现了generator的next函数自动化执行。以下是async的核心实现代码（类似co模块的源码loop函数）：

function generatorToAsync(generatorFn) {
    // 生成generator对象
    const gen = generatorFn()
    return function () {
        return new Promise((resolve, reject) => {
            function loop (key, arg) {
                let res = null
                // 执行generator的next方法或throw方法
                res = gen[key](arg)
                const { value, done } = res
                // 如果generator执行结束
                if (done) {
                    return resolve(value)
                } else {
                    // 将value转为promise，处理异步结果
                    Promise.resolve(value).then(res => { 
                        loop(\'next\', value)
                    })
                }
            }
            // 开始执行
            loop(\'next\')
        })
    }
}

在这段代码中，generatorToAsync函数接收一个generatorFn，返回一个新函数。新函数返回一个Promise，内部通过loop函数递归调用generator的next方法，直到done为true，结束递归并返回最终结果。