Axios拦截器和异步加载

Question

我在axios库中使用vue.js将请求发送到我的API。 如果请求时间过长，我想全局配置它并显示“正在加载”消息。

我发现可以使用axios 拦截器配置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 （有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()方法-它显示加载程序并阻塞屏幕，直到诺言将完成，然后运行回调或显示新的吐司。

asyncBlock(promise, onResolve, onReject, html)

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

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

---

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

我怎样才能做到这一点？ 还有其他变体吗？

Answer 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显式传递给axios_error函数。