《JavaScript权威指南第七版》13.3.4实现细节,关于“ES2017解释器可以把函数体分割成一系列独立的子函数,每个子函数都被传给位于他前面以await标记的那个期约的then方法”的疑惑

发布时间 2023-05-16 18:43:35作者: 钰琪

读到“ES2017解释器可以把函数体分割成一系列独立的子函数,每个子函数都被传给位于他前面以await标记的那个期约的then方法”这一部分是比较困惑,也没有代码示例,很抽象,不易理解。
自己写了个例子来复述一下这段话:

function getPosts() {
    return new Promise(function (resolve, reject) {
        setTimeout(function() {resolve(['p1','p2','p3'])}, 1000);
    });
}
function getAuthors() {
     return new Promise(function (resolve, reject) {
        setTimeout(function() {resolve(['a1','a2','a3'])}, 1000);
    });
}
async function getAll() {
    let posts = await getPosts();
    let authors = await getAuthors();

    let result = posts.map((item, index)=>{
        return {
            post: item,
            author: authors[index]
        }
    });

    return result;
}

getAll函数这样被拆分:

function getAll() {
    // 创建返回的Promise对象
    let resultResolve,
        resultPromise = new Promise(function(resolve, reject) {resultResolve = resolve});
    
    // 第一个await之前的代码
    let posts;

    // 第一个以await标记的Promise对象后面的代码,分割为独立的函数
    function fn1 (val) {
        posts = val;

        // 将第二个函数传给它前面的Promise对象的then方法
        getAuthors().then(fn2);
    }

    // 第二个await之前的代码
    let authors;

    // 分割的第二个独立函数
    function fn2 (val) {
        authors = val;
        let result = posts.map((item, index)=>{
            return {
                post: item,
                author: authors[index]
            }
        });

        resultResolve(result);
    }

        

    // 将第一个函数传给它前面的Promise对象的then方法
    getPosts().then(fn1);

    // 返回Promise对象
    return resultPromise;
}