前端调通后端接口，axios的封装与错误处理实战

一、为什么不直接裸调 fetch

原生 fetch 能用，但缺点明显：没有超时控制、响应要手动 res.json()、错误得自己判断状态码。项目里每个页面都这么写，重复代码多得没法看。所以一般都会包一层请求库，前端圈子里 axios 还是最主流的选择。

二、先做一个全局实例

把 baseURL、超时时间、公共请求头都集中到一个实例上，后面所有请求都走它：

import axios from 'axios';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE, // 不同环境切换地址
  timeout: 10000,                         // 10 秒还没响应就放弃
  headers: { 'Content-Type': 'application/json' },
});

export default api;

这样换环境只改一个变量，不用去几十个文件里翻。

三、用拦截器把错误收口

真正省心的是拦截器。请求拦截器统一加 token，响应拦截器统一处理"成功取 data、失败弹提示"，业务代码里就干干净净了：

// 请求拦截：自动带登录态
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// 响应拦截：错误在这里集中处理
api.interceptors.response.use(
  (res) => res.data,
  (err) => {
    if (err.response?.status === 401) {
      // token 过期，跳登录或静默刷新
      window.location.href = '/login';
    } else {
      alert(err.response?.data?.message || '网络异常，请稍后重试');
    }
    return Promise.reject(err);
  }
);

业务里直接 const list = await api.get('/orders')，不用每个地方都写 try/catch。

四、几个高频坑的对策

小结

调接口这事儿，核心就一句：把公共逻辑抽到拦截器和实例里，业务代码只关心拿数据。重复少了，坑也就集中到一个地方管了。剩下的就是和后端的联调耐心——接口文档写清楚、字段对得上，比什么封装都重要。