如何将两个链式Promise的返回值赋值给外部可访问变量？

你的代码核心问题有两个：

• 两个异步函数都没有返回Promise对象，导致外部无法捕获异步操作的结果；
• 在getUserPages的回调中直接赋值pageInfo，但getPageInfo是异步操作，此时赋值的是未完成的异步任务（而非最终返回的数据）。

第一步：修复函数，让它们返回Promise #

axios的get方法本身就返回Promise，我们只需要把这个Promise返回出去，就能让后续的链式调用或await拿到结果。

修改getPageInfo函数 #

function getPageInfo(config, lastPageId) {
    // 返回axios请求的Promise
    return axios.get('http://localhost:8000/page/' + lastPageId, config)
        .then(res => res.data)
        .catch(err => {
            console.log(err);
            // 捕获错误后主动reject，避免后续链式调用忽略错误
            return Promise.reject(err);
        });
}

修改getUserPages函数 #

function getUserPages(config) {
    const userId = localStorage.getItem('userId');
    // 同样返回整个请求链的Promise
    return axios.get('http://localhost:8000/user/' + userId, config)
        .then(res => {
            const lastPageId = res.data.pages[res.data.pages.length - 1];
            // 返回getPageInfo的Promise，让结果沿链式传递
            return getPageInfo(config, lastPageId);
        })
        .catch(err => {
            console.log(err);
            return Promise.reject(err);
        });
}

第二步：在外部获取最终结果 #

异步操作的结果无法同步赋值，必须在Promise完成后（then回调或await之后）才能处理。

方式1：使用then链式调用 #

// 传入你的config参数
getUserPages(yourConfig)
    .then(finalPageInfo => {
        // 这里可以拿到最终的pageInfo，赋值给外部变量
        const externalVariable = finalPageInfo;
        console.log(externalVariable);
    })
    .catch(err => console.error(err));

方式2：使用async/await（更易读） #

// 必须在async函数内使用await
async function fetchFinalData() {
    try {
        const finalPageInfo = await getUserPages(yourConfig);
        // 赋值给外部变量
        const externalVariable = finalPageInfo;
        console.log(externalVariable);
    } catch (err) {
        console.error(err);
    }
}

// 执行异步函数
fetchFinalData();

内容的提问来源于stack exchange，提问作者brenobarreto