JavaScript 中怎么用统一的错误拦截器处理所有异步请求失败-js教程-PHP中文网

javascript中无原生全局异步错误拦截器，但可通过axios拦截器、自定义hook封装fetch、unhandledrejection监听及统一apierror类实现集中错误处理。

javascript 中怎么用统一的错误拦截器处理所有异步请求失败

JavaScript 中没有原生的“全局异步错误拦截器”，但可以通过封装请求逻辑 + 统一错误处理机制，实现对所有异步请求失败的集中捕获和响应。关键在于：不依赖 try/catch 每次手动包裹，而是把错误处理逻辑下沉到请求发起层。

用 Axios 拦截器统一处理（最常用）

Axios 提供了请求和响应拦截器，响应拦截器是处理请求失败最自然的位置：

在 响应拦截器 中判断 error.response（服务端返回错误状态码，如 401、500）、error.request（网络失败，无响应）、或 error.message（请求配置异常）
统一做日志上报、用户提示（如 Toast）、登录态失效跳转、自动重试等
注意：最终要 重新抛出错误 或返回 Promise.reject()，否则调用方无法感知失败

示例：

axios.interceptors.response.use(
  response => response,
  error => {
    const { response, request } = error;
    if (response) {
      // 有响应，但状态码非 2xx
      switch (response.status) {
        case 401: logoutAndRedirect(); break;
        case 403: showTip('权限不足'); break;
        case 500: showTip('服务异常，请稍后重试'); break;
      }
    } else if (request) {
      // 已发出请求但没收到响应（网络断开、超时等）
      showTip('网络连接失败');
    } else {
      // 请求未发出（配置错误等）
      console.error('Axios config error:', error.message);
    }
    return Promise.reject(error); // 保持链式调用的错误传播
  }
);

自定义 Hook 封装 fetch（React 场景）

如果用原生 fetch，可借助 React 的自定义 Hook 实现逻辑复用：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

创建 useApi 或 useRequest Hook，内部统一处理 try/catch 和错误分类
接收配置对象，自动添加 token、超时、默认 headers
错误发生时触发全局事件（如 dispatch('API_ERROR', error)）或调用预设的 errorHandler 回调

示例（简化）：

function useRequest() {
  const handleError = useCallback((error) => {
    if (error.name === 'AbortError') return; // 忽略取消请求
    if (!navigator.onLine) showTip('请检查网络');
    else if (error.status === 401) clearAuthAndGoLogin();
    else showTip(error.message || '请求失败');
  }, []);

  const request = useCallback(async (input, init = {}) => {
    try {
      const res = await fetch(input, {
        ...init,
        headers: { 'Authorization': getToken(), ...init.headers }
      });
      if (!res.ok) throw Object.assign(new Error(res.statusText), { status: res.status });
      return await res.json();
    } catch (err) {
      handleError(err);
      throw err;
    }
  }, [handleError]);

  return { request };
}

全局 unhandledrejection 监听（兜底方案）

作为补充，监听未被捕获的 Promise 拒绝事件，防止错误静默丢失：

适用于忘记 .catch() 或未 await 的异步操作
仅用于日志记录或告警，**不能替代业务层错误处理**（因为拿不到上下文，无法精准提示或恢复）
需配合白名单过滤（如忽略已知的第三方库报错）避免误报

window.addEventListener('unhandledrejection', event => {
  const { reason, promise } = event;
  // 过滤掉已知可控的拒绝（例如 abort controller 抛出的错误）
  if (reason?.name === 'AbortError') return;
  
  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
  reportToSentry(reason);
});