axios.js全局配置如何设置基础URL和拦截器？

全局配置的基础概念

Axios.js 作为一款流行的 HTTP 客户端，其全局配置功能允许开发者统一管理请求和响应的默认行为，避免在多个请求中重复编写相同代码，通过 axios.defaults 或 axios.interceptors，我们可以预设基础 URL、请求头、超时时间等参数，从而提升代码的可维护性和一致性，全局配置适用于所有由该 Axios 实例发起的请求,除非在具体请求中明确覆盖这些配置。

常用全局配置项详解

基础 URL（baseURL）
baseURL 用于指定所有请求的公共前缀，适用于接口地址有固定环境的场景（如开发、测试、生产环境）。

axios.defaults.baseURL = 'https://api.example.com/v1';

发起请求时只需传入相对路径，如 axios.get('/users')，实际请求地址会自动拼接为 https://api.example.com/v1/users。

请求头配置（headers）
通过 headers 可统一设置默认的请求头信息，如 Content-Type、Authorization 等。

axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.headers.post['Content-Type'] = 'application/json';

common 属性下的请求头会作用于所有请求方法，而 get、post 等方法则针对特定请求类型。

超时时间（timeout）
timeout 用于设置请求超时阈值（单位：毫秒），避免请求因网络问题长时间挂起。

axios.defaults.timeout = 10000; // 10秒超时

若服务器在规定时间内未响应，Axios 会自动中断请求并触发错误回调。

自定义响应码处理（validateStatus）
默认情况下，Axios 仅当 HTTP 状态码为 2xx 时才会 resolve 请求，其他状态码会触发 reject，通过 validateStatus 可自定义成功/失败的判断逻辑。

axios.defaults.validateStatus = function (status) {
  return status >= 200 && status < 300; // 仅 2xx 视为成功
};

拦截器的全局配置

拦截器是 Axios 的高级功能，分为请求拦截器和响应拦截器，可在请求发送前或响应接收后统一处理逻辑。

请求拦截器
用于在请求发送前修改配置、添加 token 或处理错误。

axios.interceptors.request.use(config => {
  // 在发送请求前添加 token
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  // 对请求错误做处理
  return Promise.reject(error);
});

响应拦截器
用于统一处理响应数据、错误码或数据格式转换。

axios.interceptors.response.use(response => {
  // 对响应数据做处理
  return response.data;
}, error => {
  // 对响应错误做处理
  if (error.response) {
    switch (error.response.status) {
      case 401:
        console.log('未授权，请登录');
        break;
      case 404:
        console.log('请求资源不存在');
        break;
    }
  }
  return Promise.reject(error);
});

配置的优先级与注意事项

Axios 的配置遵循“就近原则”，即：具体请求配置 > 全局配置 > 拦截器配置，若全局 baseURL 设为 /api，而在单个请求中传入 url: '/users'，则最终请求地址为 /api/users；若请求中明确传入 url: 'https://other-api.com/users'，则会覆盖全局配置。

需注意，全局配置会作用于所有请求，因此在多环境或复杂项目中，建议结合环境变量动态调整配置（如通过 process.env.NODE_ENV 切换不同环境的 baseURL），拦截器的执行顺序遵循“先进后出”原则，后添加的拦截器会优先执行。

Axios.js 的全局配置功能通过简化重复代码、统一处理逻辑，显著提升了开发效率，合理运用 defaults 和 interceptors，能够优雅地处理请求头、超时、认证等通用场景，同时确保代码的简洁性和可维护性，在实际开发中，需根据项目需求灵活配置，并注意优先级规则,以避免意外的覆盖行为。