vue3+vite+TS的axios二次封装和api请求

// src/utils/http.ts
import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    const res = response.data;
    // 根据业务判断是否需要进行错误处理
    if (res.code !== 200) {
      // 可以在这里处理不同的错误信息
      console.log('response error', res);
      return Promise.reject(new Error(res.message || 'error'));
    }
    return res;
  },
  error => {
    console.log('error', error); // for debug
    return Promise.reject(error);
  }
);
 
export default service;
 
// src/api/user.ts
import http from '@/utils/http';
 
export const getUserInfo = (params: { id: number }) => {
  return http({
    url: '/user/info',
    method: 'get',
    params
  });
};
 
// 使用api
import { getUserInfo } from '@/api/user';
 
getUserInfo({ id: 1 }).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

这个示例展示了如何在Vue3+Vite+TS项目中对axios进行二次封装，并定义了一个简单的用户信息获取API。在实际应用中，你可以根据自己的业务需求对请求和响应进行相应的处理。