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

相关推荐
一个程序员(●—●)1 分钟前
Lua函数与表+Lua子文件加载与元表
开发语言·lua
zyx没烦恼2 分钟前
Linux 进程信号
linux·运维·服务器·开发语言·c++
风雨兼程^_^5 分钟前
Nuxt3项目的SEO优化(robots.txt,页面tdk,伪静态.html,sitemap.xml动态生成等)
前端·seo·nuxt3·服务端渲染ssr
佬乔8 分钟前
xml中配置AOP织入
java·服务器·前端
Eugene__Chen9 分钟前
JavaWeb开发基础知识-XML和JSON
java·开发语言·前端
谢尔登13 分钟前
为 IDEA 设置管理员权限
前端·express
努力学习的小廉22 分钟前
【C++11(上)】—— 我与C++的不解之缘(三十)
java·开发语言·c++
霍珵蕴26 分钟前
Kotlin语言的软件工程
开发语言·后端·golang
nlog3n27 分钟前
Java观察者模式详解
java·开发语言·观察者模式
Kx…………28 分钟前
Uni-app入门到精通:uni-app的基础组件
前端·css·学习·uni-app·html