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

相关推荐
艾莉丝努力练剑9 分钟前
【洛谷刷题】用C语言和C++做一些入门题,练习洛谷IDE模式:分支机构(一)
c语言·开发语言·数据结构·c++·学习·算法
77238912 分钟前
解决 Microsoft Edge 显示“由你的组织管理”问题
前端·microsoft·edge
CHEN5_0224 分钟前
【Java基础面试题】Java基础概念
java·开发语言
烛阴27 分钟前
前端必会:如何创建一个可随时取消的定时器
前端·javascript·typescript
JarvanMo1 小时前
Swift 应用在安卓系统上会怎么样?
前端
LinXunFeng1 小时前
Flutter - 详情页 TabBar 与模块联动?秒了!
前端·flutter·开源
萌萌哒草头将军1 小时前
Oxc 最新 Transformer Alpha 功能速览! 🚀🚀🚀
前端·javascript·vue.js
杜子不疼.2 小时前
《Python学习之字典(一):基础操作与核心用法》
开发语言·python·学习
Justinc.2 小时前
HTML5新增属性
前端·html·html5
落霞的思绪2 小时前
Java设计模式详细解读
java·开发语言·设计模式