Axios 拦截器和异步加载答案

【问题标题】：Axios interceptors and async loadingAxios 拦截器和异步加载
【发布时间】：2019-04-12 08:26:53
【问题描述】：

我使用带有 axios 库的 vue.js 向我的 API 发送请求。如果请求太长，我想全局配置它并显示加载消息。

我发现，我可以使用 axios interceptors 来配置 axios 全局

axios.interceptors.request.use((config) => {
    // Do something before request is sent
    return config;
  }, (error) => {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use((response) => {
    // Do something with response data
    return response;
  }, (error) => {
    // Do something with response error
    return Promise.reject(error);
  });

为了显示通知，我使用f3oall/awesome-notifications（有version fot vue.js）；所以我尝试做这样的事情

axios.interceptors.request.use((config) => {
    this.$awn.info("Try to send request");
    return config;
}, (error) => axios_error(error));

axios.interceptors.response.use((response) => {
    this.$awn.success("Success!");
    return response.data;
}, (error) => axios_error(error));

function axios_error(error) {
    //this.$awn.alert("Request error"); // not works - Uncaught (in promise) TypeError: Cannot read property '$awn' of undefined

    return Promise.reject(error);
}

但我还有下一个问题：

首先。我不想使用sucess 方法显示成功消息。我想使用asyncBlock() 方法 - 它显示加载程序并阻塞屏幕，直到完成承诺，然后运行回调或显示新的 toast。

asyncBlock(promise, onResolve, onReject, html)

但是如何在interceptors.request 和interceptors.response 中使用它呢？

第二个。在axios_error() 中我不能使用this。结果this.$awn.alert("Request error"); 不起作用。我该如何解决这个问题？

我只想全局配置下一个行为：如果我发送请求并且它的持续时间超过 500 毫秒 - 显示 asyncBlock 点（全窗口加载消息）。如果请求期间发生错误，则显示错误消息 - this.$awn.alert("Request error")。如果没有错误 - 不显示任何消息。

我该怎么做？还有其他变种吗？

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

首先。您可以利用在请求和响应拦截器中都可以访问的config 对象：

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)
});

第二个。要么直接从错误拦截器 lambda 函数调用 this.$awn.alert()（以访问 Vue 组件的 this），要么将 this.$awn 显式传递给 axios_error 函数。

【讨论】：