JavaScript取消请求方法

目录
  • 引言
  • 取消 XMLHttpRequest 请求
    • 取消 Fetch 请求
  • 取消 aixos 请求

引言

众所周知，JavaScript 实现异步请求就靠浏览器提供的两个 API —— XMLHttpRequest 和 Fetch。我们平常用的较多的是 Promise 请求库 axios，它基于 XMLHttpRequest。

本篇带来 XMLHttpRequest、Fetch 和 axios 分别是怎样“取消请求”的。

闲话少说，冲就完事了~

取消 XMLHttpRequest 请求

当请求已经发送了，可以使用 XMLHttpRequest.abort() 方法取消发送，代码示例如下：

const xhr = new XMLHttpRequest();
xhr.open('GET', '<http://127.0.0.1:3000/api/get>', true);
xhr.send();
setTimeout(() => {
	 xhr.abort();
}, 1000);

取消请求，readyState 会变成 XMLHttpRequest.UNSENT(0)；请求的 xhr.status 会被设为 0 ；

不如在 Chrome DevTools Network 中，看看正常请求和取消请求的对比图：

取消 Fetch 请求

取消 Fetch 请求，需要用到 AbortController API。我们可以构造一个 controller 实例：const controller = new AbortController() , controller 它有一个只读属性 AbortController.signal，可以作为参数传入到 fetch 中，用于将控制器与获取请求相关联；

代码示例如下：

const controller = new AbortController();
void (async function () {
    const response = await fetch('<http://127.0.0.1:3000/api/get>', {
        signal: controller.signal,
    });
    const data = await response.json();
})();
setTimeout(() => {
    controller.abort();
}, 1000);

浏览器控制台对比图：

我们其实可以在 controller.abort() 传入“取消请求的原因”参数，然后进行 try...catch 捕获

取消 aixos 请求

axios 同样支持 AbortController

const controller = new AbortController();
const API_URL = '<http://127.0.0.1:3000/api/get>';
void (async function () {
    const response = await axios.get(API_URL, {
        signal: controller.signal,
    });
    const { data } = response;
})();
setTimeout(() => {
    controller.abort();
}, 1000);

控制台截图：

错误捕获：

注意：axios 之前用于取消请求的 CancelToken 方法已经被弃用，更多请见文档 axios-http.com/docs/cancel…；

本篇通译自：levelup.gitconnected.com/how-to-canc…

作者：Zachary Lee

以上就是JavaScript取消请求方法的详细内容，更多关于JavaScript取消请求的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript实现可终止轮询请求的方法

    JavaScript实现可终止轮询请求的方法

    目录 什么是轮询请求? 轮询的要点 setInterval的问题 实现轮询 准备工作 基础版 进阶版 最终版 最近遇到了一个需求,需要每隔5s请求一个接口获取接口返回的结果,返回成功后停止请求,接口的返回的值有下面几种情况: // 成功 { "code": 0, "msg": '成功' } // 查询中 { "code": -1, "msg": '结果查询中' } // 失败 { "code": 1, &q

  • Vue-cli中post请求发送Json格式数据方式

    Vue-cli中post请求发送Json格式数据方式

    目录 post请求发送Json格式数据 举个例子 解决post请求无法携带数据问题 post请求发送Json格式数据 这里就不详细说明了 举个例子 var param = new URLSearchParams();         param.append("productId",this.$route.params.id)         this.axios({             url:"http://39.106.44.63:10086/loadAllProd

  • JS实现网络请求的三种方式梳理

    目录 背景 前言 XMLHttpRequest Promise async/await 结语 背景 为了应对越来越多的测试需求,减少重复性的工作,有道智能硬件测试组基于 electron 开发了一系列测试提效工具. 随着工具的快速开发迭代,代码中出现了越来越多的嵌套的回调函数,工具崩溃的几率也越来越大.为了解决这些问题, 我们用 async/await 对这些回调函数进行了重构, 使得代码量下降,代码的可读性和可理解性都有了大幅度提高. 本文介绍了 基于 XMLHttpRequest.Promi

  • 详解本地Vue项目请求本地Node.js服务器的配置方法

    详解本地Vue项目请求本地Node.js服务器的配置方法

    目录 1.使用vue-cli脚手架搭建vue项目 2.使用koa搭建node后端 3.Vue项目中添加后端请求 参考资料: 前言:本文只针对自己需要本地模拟接口于是搭建一个本地node服务器供自己测试使用,仅作自己从头到尾搭建项目的记录 1.使用vue-cli脚手架搭建vue项目 1.在桌面运行 cmd,使用命令vue create demo创建一个vue项目demo,插件依赖等使用默认配置2.项目创建成功之后,使用命令 cd demo,进入 demo 文件夹,然后使用命令 npm run se

  • vue:axios请求本地json路径错误问题及解决

    vue:axios请求本地json路径错误问题及解决

    目录 axios请求本地json路径错误 axios的基础路径如何设置 举个栗子吧↓ 步骤一:入口文件:main.js 步骤二:组件:newList.vue axios请求本地json路径错误 本例用的是vuecli4,json等静态资源存放在public文件夹中 返回404 this.axios.get('public/redeme.json').then((res) => { console.log(res.data) }) 其实vue从代码到界面展示还要经过编译,所以路径会有所改变 实际路

  • Golang Gin解析JSON请求数据避免出现EOF错误

    Golang Gin解析JSON请求数据避免出现EOF错误

    目录 环境 1. 结论 2. EOF错误复现 3. ShouldBindBodyWith 源码分析 JSON是前后端交互的重要数据类型之一,使用Gin Web框架可以很方便地将HTTP请求报文中JSON格式的Body数据解析到结构体Struct或字典Map数据结构中. 环境 go version go1.14.3 windows/amd64 github.com/gin-gonic/gin v1.6.3 1. 结论 参考 Fix #216: Enable to call binding mult

  • JavaScript取消请求方法

    JavaScript取消请求方法

    目录 引言 取消 XMLHttpRequest 请求 取消 Fetch 请求 取消 aixos 请求 引言 众所周知,JavaScript 实现异步请求就靠浏览器提供的两个 API —— XMLHttpRequest 和 Fetch.我们平常用的较多的是 Promise 请求库 axios,它基于 XMLHttpRequest. 本篇带来 XMLHttpRequest.Fetch 和 axios 分别是怎样“取消请求”的. 闲话少说,冲就完事了~ 取消 XMLHttpRequest 请求 当请求

  • 浅谈axios中取消请求及阻止重复请求的方法

    目录 前言 核心--CancelToken 实际应用和封装 一些小细节 前言 在实际项目中,我们可能需要对请求进行"防抖"处理.这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮,导致前端向后端重复发送多次请求.这里我列举两种比较常见的实际情况: PC端 - 用户双击搜索按钮,可能会触发两次搜索请求 移动端 - 因移动端没有点击延迟,所以极易造成误操作或多操作,造成请求重发 以上情况有可能在有Loading遮罩时依然发生,所以我们要考虑前端阻止重复请求的方法. 核心--Canc

  • Vue中Axios中取消请求及阻止重复请求的方法

    Vue中Axios中取消请求及阻止重复请求的方法

    目录 阻止请求目的: 常见情况: 新建 axios.js 文件 全局 main.js 引入 阻止请求目的: 为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求,从而导致前端向后端重复发送多次请求. 常见情况: PC端:输入框搜素,多次请求接口移动端:移动端很容易造成误操作或多操作请求(移动端没有点击延迟)注意:有Loading遮罩时也有可能发生重复请求 新建 axios.js 文件 import axios from "axios"; // import router fro

  • Jquery Ajax请求方法小结(值得收藏)

    Jquery Ajax请求方法小结(值得收藏)

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :

  • fckeditor粘贴Word时弹出窗口取消的方法

    本文实例讲述了fckeditor粘贴Word时弹出窗口取消的方法.分享给大家供大家参考.具体方法如下: 用fckeditor作为用户发布的编辑框,允许用户发布Word.默认的情况下,粘取进word时,提示是否清除word样式,选择"是"则弹出一个框,需要再粘贴一次来清除word样式.这个操作很麻烦,因此要取消. 开始找到的方法是把ckeditor/" target="_blank">fckeditoreditorjs下的fckeditorcode_i

  • javascript取消文本选定的实现代码

    javascript选定文本取消, 能兼容所有主流浏览器了: 复制代码 代码如下: if (document.selection) { document.selection.empty(); } else if (window.getSelection) { window.getSelection().removeAllRanges(); } 对于文本框(input,textarea)中的文本选定取消, 这种方法会有一些问题. 不过也有办法, 记录下文本框中的value,再清空,再重新赋值. 方

  • javascript跨域方法、原理以及出现问题解决方法（详解）

    javascript跨域方法、原理以及出现问题解决方法（详解）

    javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实

  • JS实现统计复选框选中个数并提示确定与取消的方法

    本文实例讲述了JS实现统计复选框选中个数并提示确定与取消的方法.分享给大家供大家参考.具体实现方法如下: javascript部分如下: <script type="text/javascript"> function yesno() { var inputs = document.getElementsByName("ck[]"); var checked_counts = 0; for(var i=0;i<inputs.length;i++){

  • linux线程的取消(终止)方法

    关键: pthread_cancel函数发送终止信号 pthread_setcancelstate函数设置终止方式 pthread_testcancel函数取消线程(另一功能是:设置取消点) 1 线程取消的定义 一般情况下,线程在其主体函数退出的时候会自动终止,但同时也可以因为接收到另一个线程发来的终止(取消)请求而强制终止. 2 线程取消的语义 线程取消的方法是向目标线程发Cancel信号(pthread_cancel函数发送Cancel信号),但如何处理Cancel信号则由目标线程自己决定,

  • jQuery实现复选框成对选择及对应取消的方法

    本文实例讲述了jQuery实现复选框成对选择及对应取消的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

随机推荐