前端进阶(2)使用fetch/axios时, 如何取消http请求

1. 需求

现在前端都是SPA,我们什么时候需要取消HTTP请求呢?

  1. 当我们从一个页面跳转到另外一个页面时,如果前一个页面的请求还没有返回,那么我们希望取消前一个页面的请求
  2. 某些操作耗时比较长(不能是保存等操作哦),如果用户不想等待呢,取消了操作,对应我们也需要取消HTTP请求

对于原生的XMLHttpRequest,是支持取消http请求(abort)操作的: XMLHttpRequest.abort()

那么,当我们使用ES6的fetch,或者使用axios库,如何实现呢?

2. Fetch 取消http请求

fetch与XMLHttpRequest(XHR)类似,是ES6之后浏览器(除IE之外)默认支持的http操作函数。可惜不是默认支持abort操作。但我们可以通过AbortController来实现, 直接上代码:

// 声明AbortController
const controller = new AbortController(); // 正常的http调用
fetch('https://jackniu81.github.io', { signal: controller.signal })
.then(r => r.json())
.then(response => {
console.log(response);
})
.catch(err => {
if (err.name === 'AbortError') {
console.log('Fetch was aborted')
} else {
console.log('Error', err)
}
}); // 需要取消请求时,调用:
controller.abort()

3. axios取消http请求

axios 已经实现了abort操作,

var source = axios.CancelToken.source();

axios.get('https://jackniu81.github.io', {
cancelToken: source.token
}).catch(function(err) {
if (axios.isCancel(err)) {
// handle our cancel operation
console.log('Request canceled', err.message);
} else {
// handle real error here
}
}); // 需要取消请求时,调用:
source.cancel('Abort Request');

4. jquery 取消http请求

$.ajax内部已经实现了abort功能。直接调用.abort()即可。

5. 总结

  1. fetchAbortController集成:我们将signal属性作为可选参数(option)进行传递,之后 fetch 会监听它,因此它能够中止 fetch.
  2. AbortController 是可伸缩的,可以用于一次性终止多个请求
  3. 参考fetch的实现,我们自己的代码也完善一下,实现基于AbortController操作取消操作;
  4. axios 默认支持Abort操作;

前端进阶(2)使用fetch/axios时, 如何取消http请求的更多相关文章

  1. 05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例

    目标 /* 1. 说出什么是前后端交互模式 2. 说出Promise的相关概念和用法 3. 使用fetch进行接口调用 4. 使用axios进行接口调用 5. 使用asynnc/await方式调用接口 ...

  2. 前端MVC Vue2学习总结(六)——axios与跨域HTTP请求、Lodash工具库

    一.axios Vue更新到2.0之后宣告不再对vue-resource更新,推荐使用axios,axios是一个用于客户端与服务器通信的组件,axios 是一个基于Promise 用于浏览器和 no ...

  3. 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破

    我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...

  4. [前端进阶课] 构建自己的 webpack 知识体系

    webpack webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件. Webpack 核心概念: Entry(入口):Webpack 执 ...

  5. 前端进阶必读:《JavaScript核心技术开发解密》核心提炼二

    前言 最近读勒基本关于前端的数据<JavaScript核心技术开发解密>,<webpack从入门到进阶>...这几本书帮助到我更好的理解JS.webpack在前端技术领域中的作 ...

  6. 前端进阶(1)Web前端性能优化

    前端进阶(1)Web前端性能优化 Web前端性能优化, 不仅能够改善站点的用户体验,并且能够节省相当的资源利用.下面将从1)服务器.2)html内容.3)css. 4)javascript. 5)图片 ...

  7. VUE系列三:实现跨域请求(fetch/axios/proxytable)

    1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...

  8. 前端和后端采用接口访问时的调用验证机制(基于JWT的前后端验证)(思路探讨)

    说明:基于前后端,尤其是使用Ajax请求的接口,现在市面上网页上调用的Ajax基本都是没有验证的,如果单独提取之后可以无线的刷数据. 继上一篇http://www.cnblogs.com/EasonJ ...

  9. 使用 Vue + axios 时,返回状态200,返回值被浏览器拦截

    目录 一.前言 二.解决方案 1. 在全局定义 2. 单独定义 一.前言 在使用 Vue + TypeScript + axios 时,后端已经配置了Cors的前提下,但是在请求接口的时候,返回状态为 ...

随机推荐

  1. 页面强制重新加载js的办法

    1:线上强制重新加载js的办法 js后缀?v1.0 2:开发环境强制重新加载js的办法?now=Date.now() 3:开发环境强制重新加载js的办法F12进入调试页面选择network下单 dis ...

  2. 为什么ConcurrentHashMap,HashTable不支持key,value为null?

    ConcurrentHashmap.HashMap和Hashtable都是key-value存储结构,但他们有一个不同点是 ConcurrentHashmap.Hashtable不支持key或者val ...

  3. matlab load函数用法 实例

    一 语法: load(filename) load(filename,variables) load(filename,'-ascii') load(filename,'-mat') load(fil ...

  4. MySQL学习笔记(六)

    好耶,七天课程的最后一天!我当然还没精通了,,,之后可能是多练习题目然后再学学其他的东西吧.mysql新的知识点也会在后面补充的. 一.杂七杂八补充 1. 当多个函数共用同样的参数时,可以转变成类进行 ...

  5. RabbitMQ(一)安装篇

    1. RabbitMQ 的介绍➢ 什么是 MQ?MQ 全称为 Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.➢ 要解决什么样的问题?在项目中,将一些无需即时返回且耗 ...

  6. SpringBoot启动报错 Disconnected from the target VM, address: '127.0.0.1:2227', transport: 'socket'

    今天搭建了一个SpringBoot项目,刚启动就报错 Disconnected from the target VM, address: '127.0.0.1:2227', transport: 's ...

  7. Hadoop hdfs副本存储和纠删码(Erasure Coding)存储优缺点

    body { margin: 0 auto; font: 13px / 1 Helvetica, Arial, sans-serif; color: rgba(68, 68, 68, 1); padd ...

  8. SQL字符串传参

    technicianCode in('${techList.collect { it.technicianCode }.join("','")}')

  9. FreeBSD pkg基础教程1

    pkg 基础教程1装上系统默认没有pkg,先获取pkg:#pkg 回车即可输入y 确认下载------------------------------------pkg使用https,先安装ssl 证 ...

  10. Java流程控制:增强for循环,break&continue,打印99乘法表

    增强for循环:java5引入了一种主要用于数组或集合的增强for循环for(声明语句:表达式){//代码句子} 声明语句:声明新的局部变量,该变量的类型必须和数组元素的类型匹配.其作用域限定在循环语 ...