Vue3+TypeScript封装axios请求

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 可以在这里添加请求头等信息
    return config;
  },
  (error: any) => {
    // 请求错误处理
    return Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    // 对响应数据做处理，例如只返回data部分
    return response.data;
  },
  (error: any) => {
    // 响应错误处理
    return Promise.reject(error);
  }
);
 
export default service;

这段代码定义了一个axios实例，并且为这个实例添加了请求拦截器和响应拦截器。在请求拦截器中，你可以添加配置请求，例如设置请求头；在响应拦截器中，你可以处理响应，确保你的应用只处理数据部分，而不是整个响应对象。这样的封装可以让你的代码更加清晰和可维护。