[英]Axios interceptors and async loading
我在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")
。 如果没有错误-不显示任何消息。
我怎样才能做到这一点? 还有其他变体吗?
第一。 您可以利用在请求和响应拦截器中均可访问的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
函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.