注:本案例因为是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"})这样来调用