vue3+ts axios如何封装axios

以下是封装Vue3 + TypeScript + Axios的示例代码：

1. 创建一个`api.ts`文件，用于存放API请求路径：

// api.ts
const BASE_URL = 'https://api.example.com';

export const API_PATHS = {
  getUsers: `${BASE_URL}/users`,
  getPosts: `${BASE_URL}/posts`,
  // 添加其他API路径...
};

2. 创建一个`request.ts`文件，用于封装Axios请求方法：

// request.ts
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
import { API_PATHS } from './api';

// 创建一个Axios实例
const instance = axios.create({
  baseURL: API_PATHS.BASE_URL,
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在请求发送之前可以进行一些处理，例如添加请求头等
    return config;
  },
  (error: any) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 在接收到响应数据之前可以进行一些处理，例如解析响应数据等
    return response.data;
  },
  (error: any) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

// 封装GET请求方法
export const get = (url: string, params?: any) => {
  return instance.get(url, { params });
};

// 封装POST请求方法
export const post = (url: string, data?: any) => {
  return instance.post(url, data);
};

// 添加其他请求方法，例如PUT、DELETE等...

3. 在需要使用Axios的地方，引入`request.ts`并调用封装的请求方法：

import { get, post } from './request';

// 使用GET请求获取用户列表
get(API_PATHS.getUsers)
  .then((response: any) => {
    // 处理响应数据
    console.log(response);
  })
  .catch((error: any) => {
    // 处理请求错误
    console.error(error);
  });

// 使用POST请求创建新用户
const newUser = { name: 'John', age: 25 };
post(API_PATHS.getUsers, newUser)
  .then((response: any) => {
    // 处理响应数据
    console.log(response);
  })
  .catch((error: any) => {
    // 处理请求错误
    console.error(error);
  });