Axios在VUE3中的封装（包括路由守卫token验证等）

• 安装axios并且在main.js中引入

import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080" //此处应该单独一个配置用来写环境变量
app.provide('axios',axios)//全局获取

• 创建aixos文件夹并创建axios.js文件

import axios  from "axios";

const axiosInstance  =axios.create({
	有写环境变量的可以写在里面
    // baseURL:import.meta.env.VITE_URL,
    // baseURL:'/api',
    // baseURL:import.meta.env.VITE_URL,


})

• 接下来写请求拦截器和响应拦截器（里面可以放自己的业务逻辑大多是登录和验证）

//响应拦截器
axiosInstance.interceptors.response.use(response=>{
    const res = response.data
    if(res.code == 200){
        // alert('登入成功')
        return res
    }else if(res.code == 10001){
       alert('登入过期')
    }else if(res.code == 10002){
        alert("权限不足")
    }else{
        alert(res.message)
    }
})

//请求拦截器
axiosInstance.interceptors.request.use(request=>{
    if(request.headers){
        request.headers['token'] = localStorage.getItem('token') || "";
        request.headers['Content-Type'] = 'application/json;charset=UTF-8';
        return request
    }
},error => { return Promise.reject(error) })
export default axiosInstance

• 之后就可以写自己的接口了

import axiosInstance from './axios'

export const login = (user)=>{
    return axiosInstance({
        url: "/user/login",
        method: "post",
        data:user
    })
}

• 请求的时候使用.then的形式返回参数即可

import { login as loginApi } from "../axios/admin";
loginApi(user).then((res) => {
    console.log(res);
    if (res.code == 200) {
		.....
	}
}