封装axios的toggleCompleted函数为何只返回Test拿不到接口返回值

• 核心是异步代码执行逻辑的问题：axios发起的网络请求是异步操作，不会阻塞后续代码执行。调用toggleCompleted函数时，请求刚发起还没收到响应，函数就已经执行到最后的return 'Test'语句，所以调用方拿到的永远是固定的Test字符串。
• then/catch回调中的返回值仅会传递到Promise链的下一个回调，不会作为外层toggleCompleted函数的返回值。你当前的代码没有把axios生成的Promise实例返回，调用方完全无法获取到异步请求的结果。

1. 首先修改toggleCompleted函数，返回请求对应的Promise实例，删除无意义的return 'Test'代码：

export const toggleCompleted  = (id) => {
    // 直接返回axios请求的Promise实例
    return axiosMethod.get('api/taks/toggle/' + id)
               .then(res => {
                   console.log(res.data)
                   return res.data;
               }).catch(error => {
                   console.error('请求出错', error)
                   return error;
               })
}

2. 调用时通过async/await或者then回调获取异步返回结果再做判断：

写法1：async/await（更易读） #

const markAsCompleted = async (id) => {
    const result = await toggleCompleted(id);
    console.log(result);
    if (result == 1){
        toggleMarkAsCompleted(id);
    }
}

写法2：then回调 #

const markAsCompleted = (id) => {
    toggleCompleted(id).then(result => {
        console.log(result);
        if (result == 1){
            toggleMarkAsCompleted(id);
        }
    })
}

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