为何封装的Axios导出函数无法转发错误？

核心原因 #

你封装的GET/POST都是async异步函数，调用时未添加await关键字，导致try/catch无法捕获异步错误：

• async函数默认返回Promise对象，不加await的话，try块会直接执行完毕，Promise的reject状态不会被当前的try/catch捕获，最终变成未处理的Promise拒绝。
• 直接使用Axios时你应该是加了await，所以能正常进入catch块。

解决方法 #

1. 调用时添加await，并确保处理函数为async

修改按钮的点击处理函数，必须满足两个条件：

• 处理函数本身是async函数
• 调用API.GET时加await

代码示例：

// 定义async类型的点击处理函数
const handleFetchUsers = async () => {
  try {
    // 必须加await等待Promise完成
    await API.GET('https://www.test.com/api/users');
  } catch (err: any) {
    console.log(err.response.data);
    // 此处添加用户通知逻辑，比如弹出错误提示
  }
};

// 按钮组件使用该处理函数
<button onClick={handleFetchUsers}>获取用户列表</button>

2. 可选：封装层统一处理错误（推荐）

如果需要统一处理所有API请求的错误（比如统一日志、统一错误格式转换），可以在封装的GET/POST函数内先捕获错误，处理后再重新抛出，保证调用层能正常捕获：

import axios from "axios";

async function GET(
  url: string,
  headers: { [key: string]: string } = {},
  searchParams: URLSearchParams = new URLSearchParams()
) {
  try {
    const response = await axios.get(url, { headers, params: searchParams });
    return response.data;
  } catch (err) {
    // 统一错误处理：比如打印请求日志、转换错误信息
    console.error(`GET请求失败 [${url}]:`, err);
    // 重新抛出错误，让调用层的try/catch捕获
    throw err;
  }
}

async function POST(url: string, headers: { [key: string]: string }, body: any) {
  try {
    const response = await axios.post(url, body, { headers });
    return response.data;
  } catch (err) {
    console.error(`POST请求失败 [${url}]:`, err);
    throw err;
  }
}

const API = { GET, POST };
export default API;

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