vue3+ts完成axios封装

2.axios封装

接下来我们使用class来封装，而不是传统的函数封装，因为类更具有可塑性，更加灵活。

2.1创建request.js

import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from ‘axios’;

import {message, notification} from ‘ant-design-vue’;

export class Request {

public static axiosInstance: AxiosInstance;

// constructor() {

// // 创建axios实例

// this.axiosInstance = axios.create({timeout: 1000 * 12});

// // 初始化拦截器

// this.initInterceptors();

// }

public static init() {

// 创建axios实例

this.axiosInstance = axios.create({

baseURL: ‘/api’,

timeout: 6000

});

// 初始化拦截器

this.initInterceptors();

return axios;

}

// 为了让http.ts中获取初始化好的axios实例

// public getInterceptors() {

// return this.axiosInstance;

// }

// 初始化拦截器

public static initInterceptors() {

// 设置post请求头

this.axiosInstance.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

/**

• 请求拦截器

• 每次请求前，如果存在token则在请求头中携带