typescript中封装axios探索（一）

注：本案例因为是vue3项目。故引入element-plus库，

1我们定义一下接口返回值，将其抽象出来定义成一个接口

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

2 封装axios（主要是对拦截器的封装）

import axios,{AxiosInstance,AxiosRequestConfig,AxiosResponse} from "axios"
import {ResponseData} 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 封装get、put、post？delete等请求函数

const http=(url:string,method:string="GET",params:any)=>{
    switch(method){
        case "get":
            return service.get(url,{ params})
        case "delete":
            return service.delete(url,{ params })
        case "post":
            return service.post(url, params)
        case "put":
            return service.put(url, params)
        default:
            return service.get(url,{ params })
    }
}

export default http

这样我们在调用具体接口的时候就可以直接通过http("/api/login","post".{userame:"xx",password:"xxx"})这样来调用。