vue axios封装拦截器有什么用

发布时间:2025-02-22 20:00:07 发布人:远客网络

vue axios封装拦截器有什么用

封装Vue Axios拦截器的主要作用有以下几个：1、统一处理请求和响应；2、简化代码逻辑；3、增强安全性；4、便于错误处理。通过使用拦截器，我们可以在每个请求发送之前或每个响应接收之后，进行一些通用的操作，比如设置请求头、统一处理错误信息等，从而提升代码的可维护性和复用性。

一、统一处理请求和响应

封装拦截器的一个主要作用是统一处理请求和响应。在实际的开发中，我们通常会需要在每个请求发送之前进行一些操作，比如在请求头中添加认证信息，或者在每个响应接收之后进行一些操作，比如统一处理错误信息。通过使用拦截器，我们可以将这些操作集中在一个地方进行处理，从而避免在每个请求中重复这些操作。

import axios from 'axios';
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
});
// request拦截器
service.interceptors.request.use(
  config => {
    // 统一处理请求，比如添加token
    config.headers['Authorization'] = 'Bearer ' + store.getters.token;
    return config;
  },
  error => {
    // 处理请求错误
    console.log(error);
    Promise.reject(error);
  }
);
// response拦截器
service.interceptors.response.use(
  response => {
    // 统一处理响应数据
    const res = response.data;
    if (res.code !== 20000) {
      // 错误处理
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    // 处理响应错误
    console.log('err' + error);
    return Promise.reject(error);
  }
);
export default service;

二、简化代码逻辑

通过封装拦截器，我们可以将一些通用的逻辑抽取出来，避免在每个请求中重复这些代码，从而简化代码逻辑，提升代码的可维护性和复用性。比如，在每个请求发送之前，我们都需要检查用户的登录状态，如果用户未登录，则需要跳转到登录页面。我们可以将这一逻辑放到拦截器中进行处理，从而避免在每个请求中都编写这段代码。

service.interceptors.request.use(
  config => {
    // 检查用户登录状态
    if (!store.getters.token) {
      // 跳转到登录页面
      router.push('/login');
    }
    return config;
  },
  error => {
    // 处理请求错误
    console.log(error);
    Promise.reject(error);
  }
);

三、增强安全性

封装拦截器还可以增强应用的安全性。例如，我们可以在请求拦截器中添加防止CSRF攻击的逻辑，或者在响应拦截器中统一处理未授权的响应，确保用户的安全。

service.interceptors.request.use(
  config => {
    // 添加CSRF Token
    config.headers['X-CSRF-Token'] = getCSRFToken();
    return config;
  },
  error => {
    // 处理请求错误
    console.log(error);
    Promise.reject(error);
  }
);
service.interceptors.response.use(
  response => {
    // 处理响应数据
    return response;
  },
  error => {
    if (error.response.status === 401) {
      // 处理未授权的响应
      store.dispatch('user/logout');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

四、便于错误处理

通过拦截器，我们可以统一处理错误信息，便于错误的捕获和处理。例如，我们可以在响应拦截器中捕获所有的错误信息，并统一显示错误提示，从而避免每个请求都需要单独处理错误信息。

service.interceptors.response.use(
  response => {
    // 处理响应数据
    return response;
  },
  error => {
    // 统一处理错误信息
    console.error('请求错误:', error.message);
    // 显示错误提示
    Message.error({
      message: error.message,
      duration: 5000
    });
    return Promise.reject(error);
  }
);

总结

封装Vue Axios拦截器可以帮助我们1、统一处理请求和响应；2、简化代码逻辑；3、增强安全性；4、便于错误处理。通过在拦截器中进行一些通用的操作，我们可以提升代码的可维护性和复用性，增强应用的安全性，并便于错误的捕获和处理。建议开发者在实际项目中，灵活使用拦截器，根据具体需求进行定制，以充分发挥其优势。