[Vuejs]-Axios interceptors and async loading

by

0👍

First. You can exploit the config object that is accessible in both request and response interceptors:

axios.interceptors.request.use((config) => {
    // Create a promise to pass to asyncBlock
    config.loadingScreenPromise = new Promise((resolve, reject) => {
        config.resolveLoadingScreenPromise = resolve;
        config.rejectLoadingScreenPromise = reject;
    });
    this.$awn.asyncBlock(config.loadingScreenPromise, //... other params)

    return config;
}, (error) => axios_error(error));

axios.interceptors.response.use((response) => {
    // resolve loading screen promise
    response.config.resolveLoadingScreenPromise()

    return response.data;
}, (error) => {
    // reject loading screen promise
    error.config.rejectLoadingScreenPromise(error)
    axios_error(error)
});

Second. Either call this.$awn.alert() directly from error interceptor lambda function(to access Vue component’s this) or pass this.$awn to axios_error function explicitly.

👤Ihor Diachenko

Leave a comment