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();