Axios请求加async/await仍返回Promise pending 无法获取返回值存储

• 所有async函数默认返回值都是Promise对象，你直接在同步执行的console.log里调用fetchTodo()，此时请求还没执行完成，自然只能拿到Promise <pending>状态的对象
• 你的链式调用逻辑存在错误：第一个.then(res => console.log(res.data))中，console.log的返回值是undefined，后续的.then接收到的res就是undefined，就算能拿到返回值也是空值
• 异步操作的结果不能直接在同步上下文里直接获取，必须在异步场景（async函数内部、.then回调）里处理赋值操作

首先修正函数逻辑，再通过异步回调的方式获取结果存入内存变量：

// 修正fetchTodo，让它正确返回请求到的数据
let fetchTodo = async () => {
  try {
    const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1')
    console.log(res.data)
    return res.data // 直接返回请求结果
  } catch (err) {
    console.log(err)
  }
};

// 定义内存变量存储请求结果
let todoData = null
// 用.then回调获取结果后赋值
fetchTodo().then(data => {
  todoData = data
  // 所有需要使用todoData的逻辑必须写在这个回调内，或者等该回调执行完成后再调用
  console.log("TEST: ", todoData)
})

// 如果你是在ES模块环境，或者可以包裹在自执行async函数里，也可以用以下写法：
// (async () => {
//   todoData = await fetchTodo()
//   console.log("TEST: ", todoData)
// })()

• 不要试图在同步代码里直接访问异步请求返回的变量，必须保证请求执行完成后再读取，否则会拿到null/undefined
• 建议async/await和.then/.catch不要混用，统一用async+try/catch的写法逻辑更清晰，不容易出现值传递的问题

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