vue3在axios封装拦截器

Vue 3中使用axios进行拦截器的封装方法如下：

首先，安装axios和@vue/composition-api依赖包：

npm install axios @vue/composition-api

然后，在你的项目中创建一个axios.js文件，用于封装axios和拦截器逻辑：

import axios from 'axios';
import { ref } from '@vue/composition-api';

const instance = axios.create({
  baseURL: 'https://api.example.com' // 设置请求的基础URL
});

// 创建一个ref类型的变量，用于存储当前正在进行的请求数量
const loadingCount = ref(0);

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送之前，对config进行一些处理，比如添加token等
    loadingCount.value++;
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 在响应数据返回之前，对response进行一些处理，比如统一错误处理等
    loadingCount.value--;
    return response;
  },
  error => {
    loadingCount.value--;
    return Promise.reject(error);
  }
);

export default instance;

接下来，在你的组件中使用该封装好的axios实例：

import axios from '@/axios';

export default {
  setup() {
    // 发起一个请求示例
    const fetchData = async () => {
      try {
        const response = await axios.get('/data');
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    return {
      fetchData
    };
  }
};

这样，你就成功在Vue 3中封装了axios拦截器。在请求发起前和响应返回后的拦截器中，你可以根据需要做一些通用的处理，比如添加认证信息、统一错误处理等。