vue2 vue3 的 拦截器

一：vue2

1. 创建一：utils/request.js文件

基本代码架构：

import axios from 'axios'

const request = axios.create9({
  setTimeout: 5000,
  baseURL: ""
})
request.interceptors.request.use(
  (config) => {
    console.log("config", config);
    return config;
  },
  (error) => {
    console.log("config err", error);
    return Promise.reject(error)
  },
);

request.interceptors.response.use(
  (response) => {
    console.log("response", response);
    return Promise.reject(error)
  },
  (error) => {
    console.log("response err", error);
    return error;
  },
);

export default request;

完整代码：

import axios from 'axios'

const request = axios.create({
  setTimeout: 5000,
  baseURL: ""
})

// 请求拦截器
request.interceptors.request.use(
  (config) => {
    // 配置请求头，token ...
    console.log("config", config);
    return config;
  },
  (error) => {
    console.log("config err", error);
    return Promise.reject(error)
  },
);

// 响应拦截器
request.interceptors.response.use(
  (response) => {
    // 响应成功：如果状态码是200~300 就是响应成功，进行 解构赋值，展示成功的信息
    console.log("response", response);
    return response.data
  },
  (error) => {
    // 响应失败 1.401===token失效，删除vuex存储的数据，跳转到登录页，展示错误的信息
    // 2. 500 后端错误
    // 3. 其他错误 比如网络连接错误
    console.log("response err", error);
    return Promise.reject(error);
  },
);

export default request;

二：vue3

1. 创建一：utils/request.js文件

基本代码架构：

import axios from "axios";

export const baseURL = "http://123.123.0.123:8080";
const request = axios.create({
  timeout: 10000,
  baseURL,
});

request.interceptors.request.use(
  (config) => {
    return config;
  (error) => {
    return Promise.reject(error);
  }
);

request.interceptors.response.use(
  (response) => {
    console.log(response.data, "成功响应");
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
);

export default request;

完整代码：

import axios from "axios";
import { ElMessage } from "element-plus";
import { useUserStore } from "../store/user";
// 这里我踩过坑，不能直接从  "vue-router" 获取，获取不到，时undefined，需要从router/index.js引入
import router from "../router/index";

const userStore = useUserStore();

export const baseURL = "http://123.123.0.123:8080";
const request = axios.create({
  timeout: 10000,
  baseURL,
});

request.interceptors.request.use(
  (config) => {
    config.headers["Content-Type"] = "application/json";
    // 每个公司token放置位置不一样，需要沟通
    const token = userStore.userInfo.token;
    if (token) {
      config.headers["Token"] = token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

request.interceptors.response.use(
  (response) => {
    // console.log(response.data, "成功响应");
    if (
      response.status >= 200 &&
      response.status < 300 &&
      response.data.code == 1
    ) {
      ElMessage.success(response.data.message);
      return response.data;
    } else {
      ElMessage.error(response.data.message);
    }
  },
  (error) => {
    if (error?.response?.status == 401) {
      ElMessage.error(error.message);
      // 删除pinia里的数据
      userStore.delUserInfo();
      // 跳转
      router.push("/login");
      return Promise.reject(error);
    } else if (error?.response?.status === 500) {
      ElMessage.error(error?.response?.data?.message);
    } else {
      ElMessage.error("网络错误，请检查你的网络连接");
    }
    return Promise.reject(error);
  }
);

export default request;