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

相关推荐
维吉斯蔡19 分钟前
【VS Code / Cursor】文件夹右键快捷打开与文件类型自动关联
开发语言·程序人生·学习方法
weixin_3823952337 分钟前
为小工厂量身打造:本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__43 分钟前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.1 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~2 小时前
CSS元素显示模式(display)
前端·css
luj_17682 小时前
星火科技助力边远地区防病攻坚
c语言·开发语言·c++·经验分享·算法
always_TT2 小时前
【Python 日志记录:logging 模块入门】
开发语言·python·php
xcLeigh3 小时前
Go入门:变量声明的五种方式详解
java·开发语言·golang
AI大模型-小华3 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
zmzb01033 小时前
C++课后习题训练记录Day175
开发语言·c++