axios攔截器

在這個vue項目中在啟動文件main.js中給axios配置了攔截器，此處配置后它就是全局的。在請求前會出現一個動態的loading圖，在響應后隱藏此loading圖。

這非常好用。在每個頁面的請求數據動作中都可以享受到此福利。

但出現了另外一種情況：

有一個顯示保險金支付的結果頁面，后端返回的結果是異步的，前端請求此結果的時候支付狀態可能是：核保成功支付中、核保成功支付失敗、核保成功支付完成、核保失敗4中狀態。只有支付完成和核保失敗的時候才是需要的最終結果，其余兩種情況則需要再次輪詢發送請求。

這就有問題了：

輪詢間隔0.5s，那個loading圖標就出現每次0.5s閃現一下的異常。這種視覺感受可不好。

於是想着解除攔截器。

但前面說了，攔截器在main.js中配置后是全局享用的，在這里去掉那么其他頁面的請求loading效果都沒有了。

查閱axios官網使用指南。只給出簡單一句：

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

后來想了想我就將main.js中的攔截器export出去，在結果頁引入，然后移除此攔截器可否：

main.js:

// 添加請求攔截器
const requestInterceptors = axios.interceptors.request.use( config =>{
    Vue.$vux.loading.show({            // 這是vux的loading
        text: '請求中'
    })
    return config;
},  error =>{
    Vue.$vux.loading.hide()
    return Promise.reject(error);
});

// 添加響應攔截器
const responseInterceptors = axios.interceptors.response.use( response =>{
    Vue.$vux.loading.hide()
    return response;
},  error =>{
    // 對響應錯誤做點什么
    return Promise.reject(error);
});
// 為了某些組件可能需要移除這個攔截器
export { requestInterceptors, responseInterceptors}

 

result.vue:

import { requestInterceptors, responseInterceptors } from '../main'

    export default {
        name: "hone",
        data() {
            return {
                times: 0
            };
        },
        created(){
            axios.interceptors.request.eject(requestInterceptors); axios.interceptors.response.eject(responseInterceptors); this.getData();
        },
        
        methods: {
            getData(){
                this.times++;
                if(this.times > 30) return;
                axios.get('static/a.json').then(res=>{
                    console.log(res);
                }).catch(err=>{
                    console.log(err)
                })
            }
        }
    };

這樣就只在此頁面移除了攔截器。