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

相关推荐
九章云极AladdinEdu13 分钟前
深度学习优化器进化史:从SGD到AdamW的原理与选择
linux·服务器·开发语言·网络·人工智能·深度学习·gpu算力
axban14 分钟前
QT M/V架构开发实战:QStandardItemModel介绍
开发语言·数据库·qt
猿究院-赵晨鹤29 分钟前
String、StringBuffer 和 StringBuilder 的区别
java·开发语言
I'm a winner34 分钟前
第五章:Python 数据结构:列表、元组与字典(一)
开发语言·数据结构·python
BillKu35 分钟前
Vue3应用执行流程详解
前端·javascript·vue.js
葵野寺38 分钟前
【RelayMQ】基于 Java 实现轻量级消息队列(九)
java·开发语言·rabbitmq·java-rabbitmq
欧阳天风1 小时前
链表运用到响应式中
javascript·数据结构·链表
Codebee1 小时前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊1 小时前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius1 小时前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记