在vue3中如何实现axois的过滤器和拦截器

以下是在 Vue 3 和 TypeScript 中使用 Axios 设置拦截器和过滤器的代码：
 
1. 安装 Axios 和相关类型定义：
 
- 使用 npm 或 yarn 安装 Axios 和  @types/axios 。

npm install axios @types/axios
// 或
yarn add axios @types/axios
 
2. 创建 Axios 实例并设置拦截器：
 
- 在项目的 src/utils/http.ts 文件中：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

const instance: AxiosInstance = axios.create({
  baseURL: 'your-api-base-url',
});

instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 可以在这里添加请求头、处理请求参数等
    config.headers['Authorization'] = 'your-auth-token';
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 可以在这里处理响应数据
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;
 
3. 创建过滤器函数：
 
- 在 src/utils/filters.ts 文件中：
- typescript  复制
export function responseFilter(data: any): any {
  // 对数据进行过滤处理
  return {
    filteredData: data.someProperty,
  };
}
 
4. 在响应拦截器中使用过滤器：
 
- 修改 src/utils/http.ts 文件中的响应拦截器：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
import { responseFilter } from './filters';

const instance: AxiosInstance = axios.create({
  baseURL: 'your-api-base-url',
});

instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 可以在这里添加请求头、处理请求参数等
    config.headers['Authorization'] = 'your-auth-token';
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response: AxiosResponse) => {
    const filteredResponse = responseFilter(response.data);
    return filteredResponse;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;
 
 
在需要使用 Axios 的 Vue 3 组件中，可以这样引入并使用：
 
import http from '@/utils/http';

const fetchData = async () => {
  try {
    const response = await http.get('/your-api-endpoint');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
};