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

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

免责声明

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

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

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

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

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

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

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

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

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

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

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

友情赞助

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

相关推荐
别拿曾经看以后~44 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨4 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
Devil枫7 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子8 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山8 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js