如何处理axios异步请求的响应并正确返回Promise？

上述两种写法均存在语法错误和API误用问题，都不正确。

第一种写法错误： #

• Promise构造函数要求传入的是一个带resolve/reject参数的执行器函数，直接传入普通对象属于语法错误，运行时会直接抛出异常。
• 误用data.json()方法：该方法是Fetch API中Response实例的专属方法，axios内部已经默认完成了响应体的JSON解析，返回结果的data字段就是解析完成的JS值，无需二次调用解析方法。

第二种写法错误： #

• await关键字只能在被async修饰的函数内部使用，Promise的执行器函数没有加async修饰，直接写await会报语法错误。
• 冗余包装Promise：axios.get本身已经返回Promise，不需要手动再套一层Promise构造函数，属于典型的「Promise反模式」。
• Promise执行器中直接return值不会生效，必须调用resolve(返回值)才能让Promise进入成功状态，此处的return值完全不会被外部获取到。
• 和第一种写法一样存在data.json()的误用问题。

分两种常用写法，两种写法返回的都是调整后值包装的Promise：

1. 链式调用写法 #

return axios.get('/home.json')
  .then(({ data, ...res }) => {
    // then回调的返回值会自动被包装为新的Promise
    return {
      // 如需调整data可在此处自定义处理，无需调用json()
      data,
      ...res
    }
  })

2. async/await写法 #

// 外层函数添加async修饰即可，异步函数的返回值会自动包装为Promise
async function getHomeData() {
  const { data, ...res } = await axios.get('/home.json')
  // 自定义调整返回值
  return {
    data,
    ...res
  }
}

如果确实需要拿到原始响应体自行解析，可以在axios请求配置中添加responseType: 'blob'或者responseType: 'text'，再自行处理解析逻辑。

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