axios取消请求

CoderLonely

已于 2025-05-03 12:26:52 修改

阅读量8.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-08-12 09:44:43 首次发布

本文链接：https://blog.youkuaiyun.com/lu2925028830/article/details/126296846

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了两种使用Axios库取消HTTP请求的方法。方法一通过直接创建CancelToken来实现请求的取消；方法二则是利用CancelToken源对象的方式进行请求取消。这两种方式均允许用户在请求发送后主动取消该请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios取消请求方法一

let send_btn = document.getElementById("send_btn")       //发送请求按钮
let cancel_btn = document.getElementById("cancel_btn")	 //取消请求按钮
let cancel = null;     
send_btn.onclick = function(){
		if(cancel != null){
			cancel()     //如果上一次的请求还在继续，则取消
		}
		axios({
			method:"get",
			url:"http://localhost:3000/test.php",
			cancelToken:new axios.CancelToken(function(c){
				cancel = c
			})
		}).then(response=>{
			//处理响应数据
			cancel = null
		}).catch(reason=>{
			//错误处理
		})
}

cancel_btn.onclick = function(){
	//取消请求
	cancel()
}

axios取消请求方法二

//利用source对象创建canceltoken
let send_btn = document.getElementById("send_btn") 	 	//发送请求按钮
let cancel_btn = document.getElementById("cancel_btn")  //取消请求按钮
let source = axios.CancelToken.source();
send_btn.onclick = function(){
       // 判断上一次的请求是否还在继续，如果还在继续，则取消上一次的请求
       if(source.token._listeners!=undefined )
        {
            source.cancel("取消请求")
            source = axios.CancelToken.source()
        }
        axios.get('http://localhost:3000/front-end/axios/response.php',{
            cancelToken:source.token
            }).then(response=>{
                // 处理响应
            }).catch(reason=>{
                if(axios.isCancel(reason)){
                    console.log("取消请求",reason)
                }else{ 
                    //错误处理
                }
            })
        }
//取消按钮点击，则取消请求
cancel_btn.onclick = function(){
    source.cancel("请求已被取消")
    source = axios.CancelToken.source()
}