首页 > 其他分享 >Vue使用AbortController取消请求

Vue使用AbortController取消请求

时间:2023-02-07 10:56:50浏览次数:50  
标签:Vue 请求 abortController signal AbortController axios config

官方文档

https://github.com/axios/axios#cancellation

Cancellation
AbortController
Starting from v0.22.0 Axios supports AbortController to cancel requests in fetch API way:

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()

示例

场景

连续点击检索按钮,取最后一次检索结果,防止上次请求比此次请求慢,而覆盖此次检索结果的问题

依赖

"axios": "^0.22.0",

代码

// 检索接口 取消请求传入config

function getSearchSuggest(query,config) {
    return request.get(url,config);
}
// 初始化
abortController:new AbortController(),
// 检索
querySearch(str) {
			this.abortController.abort(); // 取消上次请求
			this.abortController = new AbortController(); // 新的请求
		        analyzeResponse({
				request: searchService.getSearchSuggest(str,{signal:this.abortController.signal}), // 请求传入config
				})
			.then(data => {
				/.....
			})
			.catch(err => console.error(err));
			}
		},

标签:Vue,请求,abortController,signal,AbortController,axios,config
From: https://www.cnblogs.com/momoli/p/17097616.html

相关文章

  • vue3.0 同一项目中调用多个域名的请求
    1.简单粗暴形式:复制多个request.js文件,设置不同的baseUrl,根据需要引用不同的request.js文件。可以解决问题,但不推荐使用2.参数配置形式:利用参数配置,可灵活的调用多个不......
  • vue3 手写dropdown
    <template><divclass="drp_component":class="classname"><p@click="openDrp"class="ws-n"ref="drpDef"title=""><slot></slot></p></div......
  • 基于Springboot+Mybatis+mysql+vue宠物到家管理平台
    @目录一、系统介绍二、功能展示1.主页(普通用户)2.登陆、注册(普通用户)3.宠物大全(普通用户)4.宠物详情(申请领养、点赞、评论)(普通用户)5.我的送养(普通用户)6.我的领养(普通用户......
  • 面试官:vue2和vue3的区别有哪些?
    一、Vue3与Vue2区别详述1.生命周期对于生命周期来说,整体上变化不大,只是大部分生命周期钩子名称上+“on”,功能上是类似的。不过有一点需要注意,Vue3在组合式API(Comp......
  • 说说你对Vue的keep-alive的理解
    什么是keep-alive在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。也就是说,keep......
  • 滴滴前端一面必会vue面试题(附答案)
    实现双向绑定我们还是以Vue为例,先来看看Vue中的双向绑定流程是什么的newVue()首先执行初始化,对data执行响应化处理,这个过程发生Observe中同时对模板执行编译,找到其中......
  • 前端vue面试题
    父子组件生命周期调用顺序(简单)渲染顺序:先父后子,完成顺序:先子后父更新顺序:父更新导致子更新,子更新完成后父销毁顺序:先父后子,完成顺序:先子后父diff算法时间复杂度:个树......
  • 请求方法
    请求方法     备注 POST     创建资源-增加 GET       获取资源-查询 PUT       替换资源-修改 DELETE 删除资源 HEAD   ......
  • HttpServletRequest request 请求中文转换
    /***request转字符串*@paramrequest*@paramcharset编码格式(UTF-8)*@return*@see[类、类#方法、类#成员]*/publicstaticStringparseRequst(Ht......
  • 一次完整的http请求过程
    一、http请求的完整过程简述1、域名解析:使用DNS协议进行域名解析2、建立连接:发起TCP三次握手3、发起http请求:建立TCP连接成功后,浏览器发起http请求4、响应http请求:服务......