Vue3实战笔记（08）— 封装自己的AXIOS工具类

---

前言

为啥封装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。