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('沒有可取消的請求');
               
           }
       }

沒有請求時點擊取消:

同時點擊請求 和 取消請求: