likes
comments
collection
share

【译】使用 Axios 拦截器中止 Vue 请求

作者站长头像
站长
· 阅读数 20

大家好,这里是大家的林语冰。

免责声明

本文属于是语冰的直男翻译了属于是,仅供粉丝参考,英文原味版请临幸 AbortController — Abort ongoing calls in Vue with Axios interceptor

假设 App 的用户可以在短时间内进行多个 API 调用,但您只想显示上次调用的结果。之前正在进行的请求变得无关紧要。在这种情况下,您可以利用 Axios 拦截器。

诉诸 Axios 拦截器,您可以在 then/catch 方法处理请求或响应之前拦截它们。

一个现实生活中的例子是对数据进行过滤或排序。当用户多次单击排序按钮时,它们希望看到上次排序请求的结果。因此,我们可以取消之前所有正在进行的 API 调用。

首先,我们需要创建 axios.ts,在其中实现拦截器。在此文件中,我们将使用 cancelPreviousRequest 属性扩展 AxiosRequestConfig。此属性将指明在发送新的 API 请求时是否应取消正在进行的调用。

【译】使用 Axios 拦截器中止 Vue 请求

然后我们需要添加新的映射表,我们会在其中存储待处理的请求。

【译】使用 Axios 拦截器中止 Vue 请求

现在让我们实现请求拦截器,现在就是见证奇迹的时刻。

【译】使用 Axios 拦截器中止 Vue 请求

最后一件事是拦截响应并从待处理请求映射中删除已完成的调用。

【译】使用 Axios 拦截器中止 Vue 请求

差不多就是这样。现在,您只需将 cancelPreviousRequests: true 传入你的 API 调用配置,请求将被取消。

【译】使用 Axios 拦截器中止 Vue 请求

通过此技术,您可以简化 App 的性能,减少不必要的网络流量,并提供更流畅的 UI。

因此,请继续在您的项目中实现 Axios 拦截器,并控制 API 请求的处理,以获得更高效、更优的 App。

友情赞助

【译】使用 Axios 拦截器中止 Vue 请求

您现在收看的是前端翻译计划,学废了的小伙伴可以订阅此专栏合集,我们每天佛系投稿,欢迎持续关注前端生态。谢谢大家的点赞,掰掰~

转载自:https://juejin.cn/post/7301145359852994594
评论
请登录