前言
为啥封装Axios？
提高代码重用性、简化调用、统一错误处理等等。
一、封装自己的Axios工具
直接上源码，封装思路注释。
//封装axios
import axios from "axios"
import globalConfig from "@/global.config.js"
// Set config defaults when creating the instance
const shaxios = axios.create({
//默认根域名
baseURL: 'https://api.example.com'
// headers:{
// test:"test",
// test1:"test1"
// }
});
// Alter defaults after instance has been created
//1、通用默认配置
//配置默认token ---headers 配置请求也会导致跨域问题，需要配置Access-Control-Allow-Headers: test,test1,Content-Type
// shaxios.defaults.headers.common['Authorization'] = "AUTH_TOKEN";
// 内容类型
// shaxios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//超时时间
shaxios.defaults.timeout = 2500;
//2、拦截器配置
shaxios.interceptors.request.use(function (config) {
/*...token等配置*/
let whiteList = globalConfig.whiteListApi
let url = config.url
let token = localStorage.getItem("token")
if(whiteList.indexOf(url)===-1&&token){ //不存在白名单中且token不为空
config.headers.token = token //设置token
}
console.log(whiteList)
return config;
},error=>{
return Promise.reject(error) //错误处理
}
)
shaxios.interceptors.response.use((res)=> {
/*...响应相关统一处理*/
const status = res.data.status || 200
const message = res.data.message || "未知错误"
debugger
if(status === 401){
alert("没有权限！")
router.push("/login")
}
if(status!==200){
alert("错误："+status+" "+message)
return Promise.reject(new Error(message))//错误处理
}
},error=>{
return Promise.reject(error)//错误处理
})
export default shaxios
白名单global.config.js：
export default{
whiteListApi :["/login","/oauth2"]
}
总结
在实际应用中，你可能需要根据项目的具体需求来扩展这个基础类，例如添加更多的HTTP方法、处理不同的错误情况、提供上传文件的功能等。此外，你还可以根据需要配置Axios实例，比如设置超时时间、请求头、代理等。基础封装结束，后续还会把请求方法根据业务进行封装api。
