JavaScript网络请求_Axios拦截器与错误处理

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 可以在此处开启 loading
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
  

axios.interceptors.response.use(
  response => {
    // 直接返回响应数据，简化调用层处理
    return response.data;
  },
  error => {
    // 在此处统一处理错误
    return Promise.reject(error);
  }
);
  

axios.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    if (error.response) {
      // 服务器返回了错误状态码
      switch (error.response.status) {
        case 401:
          // 通常表示登录过期，跳转到登录页
          window.location.href = '/login';
          break;
        case 403:
          alert('权限不足');
          break;
        case 500:
          alert('服务器内部错误，请稍后再试');
          break;
        default:
          alert(`请求失败：${error.response.data.message || '未知错误'}`);
      }
    } else if (error.request) {
      // 网络异常，如断网、服务不可达
      alert('网络连接失败，请检查网络');
    } else {
      // 其他错误，如设置请求时出错
      console.error('请求配置异常:', error.message);
    }

    // 将错误继续抛出，便于调用层捕获
    return Promise.reject(error);
  }
);
  

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
});

// 添加该实例的拦截器
api.interceptors.request.use( ... );
api.interceptors.response.use( ... );

export default api;
  

api.get('/user/profile')
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    // 仍可捕获特殊场景下的错误
  });