Question

我使用带有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()方法-它显示加载程序并阻塞屏幕，直到诺言完成，然后运行回调或显示新的吐司。

asyncBlock(promise, onResolve, onReject, html)

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

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

我只想全局配置下一个行为：如果我发送请求，并且持续时间超过500毫秒-显示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拦截器和异步加载

1 个答案: