axios取消某个发送的http请求和响应基础入门_请求菜鸟指南

需求场景用户在点击购买或者其他操作的时候,http响应比较慢在没有收到反馈前,用户点击返回或者跳转到其他页面时,中断当前页面的请求和响应实例化CancelToken首页需要实例化一个CancelTokenimport axios from “axios”;
const CancelToken = axios.CancelToken;发起请求然后在发起某个请求

axios取消某个发送的http请求和响应基础入门

需求场景

用户在点击购买或者其他操作的时候,http响应比较慢

axios取消某个发送的http请求和响应基础入门_请求菜鸟指南

在没有收到反馈前,用户点击返回或者跳转到其他页面时,中断当前页面的请求和响应

实例化CancelToken

首页需要实例化一个CancelToken

import axios from "axios";
const CancelToken = axios.CancelToken;

发起请求

然后在发起某个请求时调用

创建一个变量如cancel用于存储这个请求的取消方法

let cancel;
axios.get('/testApi', {
     cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

调用CancelToken

在需要取消的时候调用该变量即可

建议先做类型判断,然后充值为初始值,确保axios已实例化一个CancelToken

if (typeof cancel===`function`){
    cancel()
    cancel=null
}

查看http状态

在chrome控制面板中,可以看到请求取消的状态

海计划公众号
(0)
上一篇 2020/03/24 05:36
下一篇 2020/03/24 05:36

您可能感兴趣的内容

  • css3特效使用说明CSS3弹跳Loading加载动画特效的实现_css3指南攻略

    今天给大家分享一款非常常用的css 加载动画,这款CSS3 Loading动画主要由几个小球通过规律的上下跳动,渐隐渐显而成,效果十分生动、流畅。兼容IE8以上,尤其适合在移动端中使用,基本代替了图片实现加载的效果。反弹加载动画效果如下:代码的实现:<div

    2020/04/03
  • javascript和java之间有什么关系基础知识_区别使用帮助

    Java与JavaScript是目前比较流行的两种语言,单从表面上看,两者名称很相似,于是许多初学者容易将二者混淆,或者直接归为一类,其实不然,虽然两者有着紧密的联系,但确是两个完全不同的语言。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的

    2020/03/20
  • 源代码是什么意思小白攻略_代码菜鸟攻略

    源代码(也称源程序),是指一系列人类可读的计算机语言指令。 在现代程序语言中,源代码可以是以书籍或者磁带的形式出现,但最为常用的格式是文本文件,这种典型格式的目的是为了编译出计算机程序。计算机源代码的最终目的是将人类可读的文本翻译成为计算机可以执行的二进制指令,这种过程叫做编译,通过编译器完成。代码组合源代码作为软件的特殊部分,可能被包含在一个或多个文件中。

    2020/03/20
  • 微信活码技术如何解决微信个人号被动加好友上限加好友异常(微信群100人限制)小白教程_微信使用指南

    微信群营销已经成为主流的营销方式,我们都知道微信群未满100人之前可以分享群二维码,让我们的粉丝通过扫码进群,但是人数超过100后,发出的二维码就失效了,无法再次扫码进群,因此,很多人会有微信群满100人怎么再加人,今天给大家介绍下活码技术。传统的解决方式可能是,重新建一个群,然后生成一个新的群二维码,分享宣传出去,这样做可以解决,但是重新分享新的群二维码势

    2020/03/24
  • cocos 资源工作流程小白教程_cocos基础入门

    概述【同步性】  资源管理器中的资源和操作系统的文件管理器中看到的项目资源文件夹是同步的  在资源管理器中对资源的移动、重命名和删除,都会直接在用户的文件系统中对资源文件进行同步修改。同样的,在文件系统中(如 Windows 上的 Explorer 或 Mac 上的 Finder)对添加或删除资源,再次打开或激活 Cocos Creator 程序后,也会对资

    2020/04/05
  • js中Date的构造函数解读基础教程_日期小白入门

    javascript中的内置对象是我们经常会用到的,那么今天我们就来说说Date的四种构造方法吧一、new Date()这是我们最常使用也最熟悉不过的Date对象的构造方法了,通过无参数的构造函数我们可以默认获取到一个代表实例化时的Date对象var now = new Date();
    console.log(now) //Thu Sep 19 2019 1

    2020/03/26
  • Vue组件通信之$attrs、$listeners入门攻略_组件使用指南

    前言vue通信手段有很多种,props/emit、vuex、event bus、provide/inject 等。还有一种通信方式,那就是 $attrs 和 $listeners,之前早就听说这两个api,趁着有空来补补。这种方式挺优雅,使用起来也不赖。下面例子都会通过父、子、孙子,三者的关系来说明使用方式。$attrs官方解释:包含了父作用域中不作为 pr

    2020/03/26
  • jquery中attr()、prop()、css() 的区别菜鸟指南_区别入门知识

    区别.attr( ) 可以设置元素的属性(也就是给元素新增加一个原来并不存在的属性)也可以获取元素的本来就有的属性以及额外设置的属性。如果要获取的属性没有设置,那么获取到的结果是 undefined; .prop( )可以设置元素的属性(HTML固有的属性,可以给元素添加属性)也可以获取元素的固有的属性值,如果是额外设置的其他属性,则无法通过prop( )获

    2020/03/24
  • vue移动端弹框出现,背景禁止滑动使用攻略_滑动使用指南

    由于弹框比较长,所以弹出的时候前面的弹框内容需要滑动,但是背景需要禁止滚动,所以使用watch 监听,弹窗出现禁止滚动,弹框消失可以滚动。代码:watch: {coachCard(newVal, oldVal) {if(newVal == true) {console.log(‘gaibian l ‘);let cssStr = “overflow-y: h

    2020/03/26
  • javascript保留字/关键字有哪些?菜鸟知识_语言入门基础教程

    保留字是语言中定义具有特殊含义的标识符,保留字不能作为标识符使用。JavaScript语言中定义了一些具有专门的意义和用途的保留字,这些保留字称为关键字。保留字包括关键字和未使用的保留字。关键字则指在语言中有特定含义,成为语法中一部分的那些字。在一些语言中,一些保留字可能并没有应用于当前的语法中,这就成了保留字与关键字的区别。一般出现这种情况可能是由于考虑扩

    2020/03/22
  • vue单页面修改样式无法覆盖问题菜鸟教程下载_样式菜鸟指南

    当 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。比如:.example {color: red;}
    <template

    2020/03/29
  • Lisk小白教程_使用Js为开发语言来开发分布式程序(DAPP)的区块链开发平台

    Lisk小白教程 官方网址:https://lisk.io/ GitHub:https://github.com/LiskHQ/lisk-sdk 简介描述:使用Js为开发语言来开发…

    2020/03/07
  • dc.js使用帮助数据可视化工具,支持和允许高效展示大型多维数据集

    dc.js基础入门 官方网址:http://dc-js.github.io/dc.js/ GitHub:https://github.com/dc-js/dc.js 简介描述:数据…

    2020/03/05
  • 摄图网使用帮助_专注正版摄影高清图免费下载的图库

    摄图网入门百科 官方网址:http://699pic.com/ 简介描述:专注正版摄影高清图免费下载的图库 摄图网是一家专注正版摄影高清图免费下载的图库,可供下载的高清摄影图片量包…

    2020/03/06
  • 菜鸟教程菜鸟知识学的不仅是技术,更是梦想!

    菜鸟教程基础入门 官方网址:http://www.runoob.com/ 简介描述:学的不仅是技术,更是梦想!

    2020/03/05
  • vue使用markdown编辑器入门基础_markdown基础教程

    使用步骤1。安装mavon-editornpm install mavon-editor -S2。引入组件,样式以及调用组件import { mavonEditor } from ‘mavon-editor’
    import ‘mavon-editor/dist/css/index.css’comoponents: {mavonEditor
    }<mavon-e

    2020/03/24