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);

相关推荐
2601_949833394 分钟前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
lly2024064 分钟前
C 语言中的结构体
开发语言
JAVA+C语言21 分钟前
如何优化 Java 多主机通信的性能?
java·开发语言·php
珑墨36 分钟前
【Turbo】使用介绍
前端
军军君011 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
青岑CTF2 小时前
攻防世界-Ics-05-胎教版wp
开发语言·安全·web安全·网络安全·php
Li emily2 小时前
如何通过外汇API平台快速实现实时数据接入?
开发语言·python·api·fastapi·美股
xiaoqi9222 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
APIshop2 小时前
Java 实战:调用 item_search_tmall 按关键词搜索天猫商品
java·开发语言·数据库
打小就很皮...2 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr