vue3使用axios拦截器 vue axios拦截器怎么用

axios是一个就promise的HTTP库，可以用在浏览器和node.js中

main.js

import Vue from 'vue'
import axios from 'axios'

// 使用拦截器
// 添加请求拦截器
axios.interceptors.response.use(
    response => {
　　　　　// 在发送请求之前做些什么
        if (response.data.code && response.data.code === 401) {
            router.push({
                path: '/login',
            })
            Vue.prototype.$message.error("登录超时！");
        }
        if (response.data && response.data.code && response.data.code !== 200) {
            Vue.prototype.$message.error(response.data.msg)
        }
        return response
    },
    error => {
　　　　　// 对请求错误做些什么
        let errorStatus = [401, 403]
        if (errorStatus.includes(error.response.status)) {
            local.remove('loginToken')
            router.push({
                path: '/login',
            })
            Vue.prototype.$message.error("登录超时！");
        } else {
            Message({
                message: error.message,
                type: 'error',
                duration: 5 * 1000
            })
            return Promise.reject(error)
        }
        return error
    }
);
// 添加响应拦截器
axios.interceptors.request.use(
    config => {
　　　　　// 对响应数据做点什么
        //   判断是否存在token，如果存在的话，则每个http header都加上token
        let token = local.get('loginToken')
        let conheaders = config.headers.common
        if (!Object.prototype.hasOwnProperty.call(conheaders, 'loginToken') && token) {
            conheaders["X-Admin-Token"] = token
        }
        return config;
    },
    error => {
　　　　　// 对响应错误做点什么
        return Promise.reject(error);
    });

调用axios

api.js

import axios from 'axios'

const baseUrl="https://xxxxxx"

export const test= (param) => {     
    return axios.request({
        method: 'post/put/delete',
        url: baseUrl + '/test/list',
        data: param
    })
};

export const test2= (param) => {     
    return axios.request({
        method: 'get',
        url: baseUrl  + '/test2/get/' + param,
    })
};

使用的时候

test.vue

<script>
import {test} from "./api.js"
import Swal from "sweetalert2";
export default {
    data(){
        return{}
    },
    create:function(){
        this.testFun()
    },
    metiods:{
         testFun(){
           let params={}
           test(params)
             .then(res=>{console.log(res.data)})  
             .catch(reeor=>{Swal.fire("错误", error.toLocaleString(), "error");})
    }
</script>