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

相关推荐
qq_41769505几秒前
C++中的解释器模式
开发语言·c++·算法
pingan878716 分钟前
试试 docx.js 一键生成 Word 文档,效果很不错
开发语言·前端·javascript·ecmascript·word
big_rabbit050221 分钟前
java面试题整理
java·开发语言
张一凡9324 分钟前
重新理解 React 状态管理:用类的方式思考业务
前端·react.js
刺客xs35 分钟前
c++模板
java·开发语言·c++
weixin_5375904542 分钟前
《C程序设计语言》练习答案(练习1-5)
c语言·开发语言
阳光永恒7361 小时前
Python零基础入门全套资料包免费分享 | 从0到1系统学习路线(含课件+源码+实战案例)
开发语言·python·学习·编程入门·python教程·编程学习·免费资料
紫丁香1 小时前
pytest_自动化测试1
开发语言·python·功能测试·单元测试·pytest
2301_818419011 小时前
C++中的状态模式实战
开发语言·c++·算法
独隅1 小时前
Python 标准库 (Standard Library) 全面使用指南
android·开发语言·python