axios拦截器阻止发送请求

axios拦截器

import axios from "axios";
import { config } from "vue/types/umd";

const service=axios.create({
    baseURL : "http://xxxxx",
    withCredentials:true,
    headers:{
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
})
service.interceptors.request.use(
    config =>{
        config.headers['token']="123123123"
        return config;
    },
    error =>{
        return Promise.reject(error)
    }
)
service.interceptors.response.use(
    response => {
        const res =response.data
        if(res.code != 200){
            return "请求失败"
        }else {
            return res;
        }
    }
)
export default service;

如何阻止请求

原理：通过axios提供的cancelToken来进行拦截

话不多说，上代码：

// 使用CancelToken来进行拦截
let CancelToken =axios.CancelToken;
let source = CancelToken.source();

export function get(url,param){
    return Promise((reject,reiove)=>{
        service.get(url,param,{
            CancelToken : source.token
        }).then(res=>{
            reject.response(res)
        }).catch((e)=>{
            console.log(e);
        })
    })
}
//拦截的话可以用
source.cancel('想要打印的话')

这里分享一个坑，就是当我们拦截了一个请求后，发现后面同样的接口一样会报错，这时候我们只需要再次创建一个source对象就好了
如下：

let source = CancelToken.source();