typescript项目中封装axios（二）

本例用于axios在ts项目中封装，主要涉及到get。post。delete、put等多种场景。本例采用vue3+ts+vite故引入了一点vite语法和element-plus组件库的插件。上一篇文章中虽然对axios做了基础封装，但是没有考虑到对二进制文件上传等场景。故做了简单的完善

1 在项目根目录下新建一个types文件夹，用于存放各种interface和type

export interface ResponseData<T>{
 code:number,
 data?:T,
 message:string
}

export interface loginParams{
    systemCode: string,
    phone: string,
    password: string,
    loginType: string,
} 

export interface httpFunc{

    get<T>(url:string,params?:unknown):Promise<T>
    post<T>(url:string,params?:unknown):Promise<T>
    put<T>(url:string,params?:unknown):Promise<T>
    delete<T>(url:string,params?:unknown):Promise<T>
    upload<T>(url:string,params?:unknown):Promise<T>
    downLoad(url:string):void
    
}

2 封装axios，主要是对拦截器做基础设置

import axios,{AxiosInstance,AxiosRequestConfig,AxiosResponse} from "axios"
import {ResponseData,httpFunc} from "../types"
import { ElMessage } from "element-plus"

let service:AxiosInstance;
service=axios.create({
    baseURL:import.meta.env.MODE==="developement"?"":import.meta.env.VITE_BimDevURL,
    timeout:5000
})
service.interceptors.request.use(
    (config:AxiosRequestConfig)=>{
        return config
    },
    (error:any)=>{
    console.log("请求error",error)
        Promise.reject(error)
    }
)

service.interceptors.response.use(
    (res:AxiosResponse)=>{
        console.log("axios",res)
        if(res.status==200){
            const data:ResponseData=res.data;
            if(data.code==1){
                return data.data
            }else{
                ElMessage({
                    message:data.message,
                    type:"error"
                })
            }
        }else{
            ElMessage({
                message:"程序异常",
                type:"error"
            })
            return Promise.reject(new Error(res.data.message))
        }
    },
    (error:any)=>{
        console.log("error",error)
        let errMsg=error.response.data.message||""
        ElMessage({
            message:errMsg,
            type:"error"
        })
        Promise.reject(new Error(error))
    }
)

3：封装http函数

const http:httpFunc={
   get(url,params){
        return new Promise((resolve, reject) => {
            service.get(url, { params }).then(res => {
                resolve(res.data); //注意这里只能是res.data不能是res
            }).catch(err=>{
                reject(err)
            })
        })
    },
    post(url,params){
        return new Promise((resolve,reject)=>{
            service.post(url, params).then(res => {
                resolve(res.data);
            }).catch(err=>{
                reject(err)
            })
        })
    },
    delete(url,params){
        return new Promise((resolve, reject) => {
            service.get(url, { params }).then(res => {
                resolve(res.data);
            }).catch(err=>{
                reject(err)
            })
        })
    },
    put(url,params){
        return new Promise((resolve,reject)=>{
            service.post(url, params).then(res => {
                resolve(res.data);
            }).catch(err=>{
                reject(err)
            })
        })
    },
    upload(url,file){
        return new Promise((resolve,reject)=>{
            service.post(url,file,{
                headers:{
                    "Content-Type":"mutipart/form-data"
                }
            }).then(res => {
                resolve(res.data);
            }).catch(err=>{
                reject(err)
            })
        })
    },
    downLoad(url){
        const a = document.createElement('a')
        a.href = url
        a.download = getFileNameFromUrl(item)
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
    }
}

export default http