当前位置：首页 > VUE

vue实现http拦截

2026-01-14 06:28:58VUE

使用 axios 拦截器

在 Vue 项目中，通常使用 axios 作为 HTTP 客户端。可以通过 axios 的拦截器机制实现请求和响应的拦截。

安装 axios：

npm install axios

创建 axios 实例并添加拦截器：

import axios from 'axios';

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

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求前做些什么，例如添加 token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // 处理未授权情况
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

export default instance;

全局错误处理

可以在拦截器中统一处理错误，避免在每个请求中重复编写错误处理逻辑。

instance.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 400:
          notify.error('请求参数错误');
          break;
        case 500:
          notify.error('服务器错误');
          break;
        default:
          notify.error('未知错误');
      }
    }
    return Promise.reject(error);
  }
);

请求取消

在某些场景下可能需要取消请求，例如路由切换时取消未完成的请求。

const CancelToken = axios.CancelToken;
let cancel;

instance.interceptors.request.use(config => {
  if (cancel) {
    cancel(); // 取消上一个请求
  }
  config.cancelToken = new CancelToken(c => {
    cancel = c;
  });
  return config;
});

加载状态管理

可以通过拦截器统一管理加载状态，配合 Vuex 或组件状态使用。

let requestCount = 0;

instance.interceptors.request.use(config => {
  requestCount++;
  store.commit('setLoading', true);
  return config;
});

instance.interceptors.response.use(
  response => {
    requestCount--;
    if (requestCount === 0) {
      store.commit('setLoading', false);
    }
    return response;
  },
  error => {
    requestCount--;
    if (requestCount === 0) {
      store.commit('setLoading', false);
    }
    return Promise.reject(error);
  }
);

重试机制

对于某些特定错误可以实现请求重试逻辑。

instance.interceptors.response.use(null, error => {
  const config = error.config;
  if (!config || !config.retry) return Promise.reject(error);

  config.__retryCount = config.__retryCount || 0;
  if (config.__retryCount >= config.retry) {
    return Promise.reject(error);
  }

  config.__retryCount += 1;
  return new Promise(resolve => {
    setTimeout(() => resolve(instance(config)), config.retryDelay || 1000);
  });
});

vue实现http拦截