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

相关推荐
灵感__idea3 小时前
Hello 算法:贪心的世界
前端·javascript·算法
小成202303202654 小时前
Linux高级02
linux·开发语言
知行合一。。。4 小时前
Python--04--数据容器(总结)
开发语言·python
咸鱼2.04 小时前
【java入门到放弃】需要背诵
java·开发语言
ZK_H4 小时前
嵌入式c语言——关键字其6
c语言·开发语言·计算机网络·面试·职场和发展
A.A呐5 小时前
【C++第二十九章】IO流
开发语言·c++
椰猫子5 小时前
Java:异常(exception)
java·开发语言
lifewange5 小时前
pytest-类中测试方法、多文件批量执行
开发语言·python·pytest
GreenTea5 小时前
一文搞懂Harness Engineering与Meta-Harness
前端·人工智能·后端
cmpxr_5 小时前
【C】原码和补码以及环形坐标取模算法
c语言·开发语言·算法