axios 取消token 模糊搜索

import axios from 'axios';

// 创建一个取消令牌源(cancel token source)

const CancelToken = axios.CancelToken;

const source = CancelToken.source();

// 下拉框搜索函数

function search() {

// 获取输入值

const inputValue = document.getElementById('searchInput').value;

// 发起请求前取消上一个请求(如果还没有完成)

source.cancel('取消上一个请求');

// 创建新的取消令牌

const newSource = CancelToken.source();

// 将新令牌赋值给全局变量 source,以便于下次取消

source = newSource;

// 发起新的请求,并使用新的取消令牌

axios.get('你的搜索API', {

params: {

search: inputValue

},

cancelToken: source.token

})

.then(response => {

// 处理响应数据

console.log(response.data);

})

.catch(thrown => {

if (axios.isCancel(thrown)) {

console.log('上一个请求已被取消:', thrown.message);

} else {

// 处理其他错误

console.error(thrown);

}

});

}

// 绑定输入框的事件

document.getElementById('searchInput').addEventListener('input', search);

相关推荐
一 乐几秒前
美食推荐|基于springboot+vue的美食分享系统设计与实现(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·美食
WX-bisheyuange2 分钟前
基于Spring Boot的电影院购票系统设计与实现
前端·javascript·vue.js·毕业设计
曹牧8 分钟前
Java String[] 数组的 contains
java·开发语言·windows
yong999011 分钟前
LSD直线提取算法 MATLAB
开发语言·算法·matlab
一只专注api接口开发的技术猿14 分钟前
构建电商数据中台:基于淘宝 API 关键词搜索接口的设计与实现
大数据·开发语言·数据库
浩瀚地学22 分钟前
【Java】String
java·开发语言·经验分享·笔记·学习
通义灵码26 分钟前
用 Qoder 加速前端巨石应用的架构演进
前端·人工智能·架构·qoder
一水鉴天31 分钟前
整体设计 定稿 之21 拼语言表述体系之3 dashboard.html V5(codebuddy)
前端·人工智能·架构
松涛和鸣33 分钟前
25、数据结构:树与二叉树的概念、特性及递归实现
linux·开发语言·网络·数据结构·算法
前端fighter36 分钟前
全栈项目:宠物用品购物系统及后台管理
前端·vue.js·后端