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

相关推荐
刺客_Andy7 分钟前
React 第五十二节 Router中 useResolvedPath使用详解和注意事项示例
前端·react.js·架构
豆浆94515 分钟前
vue3+qiankun主应用和微应用的路由跳转返回
前端
王将近23 分钟前
Cesium 山洪流体模拟
前端·cesium
小时前端33 分钟前
当循环遇上异步:如何避免 JavaScript 中最常见的性能陷阱?
前端·javascript
陈佳梁34 分钟前
构造器(详解)
java·开发语言
Jonathan Star41 分钟前
在 JavaScript 中, `Map` 和 `Object` 都可用于存储键值对,但设计目标、特性和适用场景有显著差异。
开发语言·javascript·ecmascript
lly20240642 分钟前
Font Awesome 音/视频图标
开发语言
Bacon1 小时前
Electron 集成第三方项目
前端
自由日记1 小时前
css学习9
前端·css·学习