如何避免 vuejs 中全局 axios 拦截器中的加载器?

时间:2021-04-22 14:42:22

标签: javascript vue.js axios vuejs3

我正在使用全局 Axios 拦截器,它在我制作 Axios 时添加加载程序。请求,但对于某些请求,我不想显示加载程序,我只想在后台发生它,我该怎么做?

这是我的全局 axios

import axios from "axios";
import {store} from '@/store';
import {TokenService} from "@/services/token.service";
import {loadingController} from '@ionic/vue';


const ApiService = {
    _requestInterceptor: 0,
    _401interceptor: 0,

    init(baseURL)
    {
        axios.defaults.baseURL = baseURL;
    },

    setHeader() {
        axios.defaults.headers.common[
            "Authorization"
            ] = `Bearer ${TokenService.getToken()}`;
         
    },

    removeHeader() {
        axios.defaults.headers.common = {};
    },

    get(resource ) {
      
        return axios.get(resource);
    },

    post(resource, data) {
        return axios.post(resource, data);
    },

    put(resource, data) {
        return axios.put(resource, data);
    },

    delete(resource) {
        return axios.delete(resource);
    },

    customRequest(data) {
        return axios(data);
    },

    mountRequestInterceptor() {
        this._requestInterceptor = axios.interceptors.request.use(async config => {
            console.log("show loading");
            const loading = await loadingController.create({
                message: 'Please wait...'
            });
 
            await loading.present();

            return config;
        });
        
    },

    mount401Interceptor() {
        this._401interceptor = axios.interceptors.response.use(
          async   response => {
             await   loadingController.dismiss().then(r => console.log(r));
               console.log('close')
                return response;
            },
            async error => {
               await loadingController.dismiss().then(r => console.log(r));
                if (error.request.status === 401) {
              
                    if (error.config.url.includes("/api/staff/token")) {
                        await store.dispatch("/api/staff/logout");
                        throw error;
                    } else {
                        try {
                      
                            await store.dispatch("auth/refreshToken");
                            return this.customRequest({
                                method: error.config.method,
                                url: error.config.url,
                                data: error.config.data
                            });
                        } catch (e) {
                            throw error;
                        }
                    }
                }
                await loadingController.dismiss().then(r => console.log(r));
                throw error;
            }
        );
    },

    unmount401Interceptor() {
        axios.interceptors.response.eject(this._401interceptor);
    }
}

export default ApiService;

你可以看到我已经确定了 put、delete、get、post 方法。我尽量避免使用那些客户方法。但是当我使用 axios.get() 时它仍然应用加载器。

0 个答案:

没有答案