vue3项目之对 axios 进行 ts 封装

8、对 axios 进行 ts 封装

在 untils 下新建 http.ts，下面是封装模板

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

const defaultConfig = {
    timeout: 5000,
    
}


class Http {
    constructor() {
        
        this.httpInterceptorsRequest()
        this.httpInterceptorsResponse()
    }

    private static axiosInstance = axios.create(defaultConfig)

    
    private httpInterceptorsRequest() {
        Http.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
            return config
        }, err => {
            return Promise.reject(err)
        })
    }

    
    private httpInterceptorsResponse() {
        Http.axiosInstance.interceptors.response.use((response: AxiosResponse) => {
            return response
        }, err => {
            return Promise.reject(err)
        })
    }


    
    public httpRequestGetT>(url: string, params: AxiosRequestConfig): PromiseT> {
        return Http.axiosInstance.get(url, { params }).then(res => res.data).catch()
    }

    public httpRequestPostT>(url: string, params: AxiosRequestConfig): PromiseT> {
        return Http.axiosInstance.post(url, params).then(res => res.data).catch()
    }
}


export const http = new Http()