如何封装axios异步函数让父级调用时等待执行完成

你的代码有两个核心问题导致接口返回无效数据：

• 第一，getOrder内部虽然用await等了axios请求结束，也在then回调里拿到了data，但是你没有把这个值作为整个getOrder函数的返回值抛出去，async函数默认返回undefined，外部自然拿不到结果
• 第二，路由处理函数里调用getOrder时，没有等待异步Promise状态落定，直接把处于pending状态的Promise对象传给了res.json，响应会在请求完成前就发送出去

1. 修正异步请求封装函数 #

不要混用async/await和then/catch链，选一种写法即可，推荐直接用async/await加try/catch，逻辑更清晰，记得显式return最终结果：

async function getOrder(orderId) {
    // 此处补全你的request参数构造逻辑
    const request = {
        // 你的业务请求参数
    }
    try {
        const response = await axios({
            method: 'post',
            url: endpoint + "/mymethod",
            data: request
        })
        // 返回值会被自动包装为Promise.resolve，供外部调用获取
        return response.data.result
    } catch (error) {
        // 错误场景可返回结构化信息，也可根据业务需求直接throw error交给上层处理
        return { error: error }
    }
}

如果你习惯用then/catch写法，必须把整个Promise链return出去，否则async函数拿不到链上的返回值（不推荐混用写法，仅作示例参考）：

async function getOrder(orderId) {
    // 构造request逻辑省略
    return axios({
        method: 'post',
        url: endpoint + "/mymethod",
        data: request
    }).then(function (response) {
        return response.data.result;
    }).catch(function (error) {
        return { "error": error };
    });
}

2. 路由层正确等待异步结果 #

路由handler本身也要适配异步逻辑，两种常用写法都可以：

写法1：标记handler为async，内部用await拿结果 #

router.get('/getOrder/:id', async (req, res) => {
    const result = await getOrder(req.params.id);
    // 可根据返回结构加自定义错误判断
    if (result.error) {
        return res.status(500).json(result)
    }
    res.json(result);
})

写法2：用Promise then链处理结果 #

router.get('/getOrder/:id', (req, res) => {
    getOrder(req.params.id)
        .then(result => {
            res.json(result)
        })
        .catch(err => {
            res.status(500).json({error: err})
        })
})

• 尽量不要在封装的请求函数里混合使用async/await和then/catch，会让返回值逻辑变混乱，提升问题排查难度
• 不要在请求封装层无差别吞掉所有错误，如果业务场景需要上层感知错误，直接在catch里throw error，由路由层统一处理HTTP状态码和返回结构
• 可以给axios加全局响应拦截器，统一处理response.data取值、通用错误码（比如登录失效、服务端500错误）的逻辑，不用每个接口都重复写取值和错误判断代码

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