ReactJS中Axios的customRequest文件为何未正常返回error错误块

• 你在customRequest.js的getSync方法catch块中直接返回了错误对象，没有抛出错误或返回rejected状态的Promise，普通return会让Promise状态变为resolved，外层调用时自然无法进入then的错误回调或者catch块。
• 异步请求封装时没有正确透传错误状态，是该类问题的核心诱因。

1. 修改customRequest.js的getSync方法 #

import axios from 'axios'

export async function getSync(url) {
  try {
    const res = await axios.get(url)
    return res.data
  } catch (err) {
    // 此处可先执行通用错误处理逻辑，比如日志上报、通用错误提示
    console.log('getSync统一错误处理：', err)
    // 关键：抛出错误，将Promise状态置为rejected，才能透传到外层
    throw err
    // 也可以写为 return Promise.reject(err)，效果完全一致
  }
}

2. App.js中调用写法 #

function getUser() {
  getSync('你的请求URL')
    .then(
      res => {
        // 成功逻辑处理
      },
      err => {
        // 此处即可拿到getSync抛出的错误，执行业务层错误处理
        console.log('业务层捕获错误：', err)
      }
    )
}
// 如果偏好async/await写法，也可以用try/catch捕获，效果一致

• 接口返回错误时，会先进入getSync的catch块执行通用错误处理，之后抛出的错误会透传到外层，触发App.js中then的第二个回调执行，完全匹配你的需求。
• 如果需要自定义错误格式，可在getSync的catch块中先组装错误字段再抛出，外层拿到的就是处理后的标准错误对象。

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