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

相关推荐
diygwcom1 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
volodyan4 分钟前
electron react离线使用monaco-editor
javascript·react.js·electron
wn5315 分钟前
【Go - 类型断言】
服务器·开发语言·后端·golang
^^为欢几何^^13 分钟前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang18 分钟前
vue3中开发引导页的方法
开发语言·前端·javascript
救救孩子把21 分钟前
Java基础之IO流
java·开发语言
WG_1722 分钟前
C++多态
开发语言·c++·面试
宇卿.28 分钟前
Java键盘输入语句
java·开发语言
Amo Xiang38 分钟前
2024 Python3.10 系统入门+进阶(十五):文件及目录操作
开发语言·python
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js