axios----请求拦截器||响应拦截器||取消请求

1.请求拦截器:

    请求拦截器的作用是在请求发送前进行一些操作:

// 后添加的拦截器,先执行!!!

        // 添加请求拦截器(回调函数)
        axios.interceptors.request.use(
            config=>{
                console.log('request interceptor 请求拦截器1');
                return config // return是为了继续向下传递, promise链式传递
            },
            error=>{
                console.log('request error, 请求拦截器失败1');
                return Promise.reject(error)// return Promise 是为了把错误继续向下传递
            })
        // 拦截器2先执行
        axios.interceptors.request.use(
            config=>{
                console.log('request interceptor 请求拦截器2');
                return config
            },
            error=>{
                console.log('request error, 请求拦截器失败2');
                return Promise.reject(error)
            })

2.响应拦截器:

    响应拦截器的作用是在接收到响应后进行一些操作:

// 添加响应拦截器
        axios.interceptors.response.use(
           response =>{
                console.log('response intercept 响应拦截器1');
                return response
           },
           function(error){
               console.log('response intercept 响应拦截器失败1');
               return Promise.reject(error)
           }
        )
        axios.interceptors.response.use(
           response =>{
                console.log('response intercept 响应拦截器2');
                return response
           },
           error=>{
               console.log('response intercept 响应拦截器失败2');
               return Promise.reject(error)
           }
        )

请求拦截和响应拦截,  要拦截的请求地址:

axios.get('http:localhost:3000/posts')
        .then(response=>{
            console.log('data',response.data);
        })
        .catch(error=>{
            console.log('error',error.message);
            
        })

3.取消请求

可以使用取消令牌取消请求

let cancel // 用于保存取消请求的函数
        function getProducts() {
            axios.get('http://localhost:3000/posts',{
                cancelToken: new axios.CancelToken((c)=>{// c是用于取消当前请求的函数
                    // 保存取消函数, 用于之后可能需要取消当前请求
                    cancel = c
                })
            }).then(response=>{
                cancel = null
                console.log('请求成功了',response.data);
            },error=>{
                cancel = null
                console.log('请求失败了',error.message);
            })
       }

       function cancelReq(){
           // 取消请求函数
           if(typeof cancel === 'function'){ // 如果typeof是个请求函数,才可以取消
               cancel('强制取消请求')
           }else{
               console.log('没有可取消的请求');
               
           }
       }

没有请求时点击取消:

同时点击请求 和 取消请求: