1

    <button onclick="test()">click me</button>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.js"></script> <script>
const l = console.log; async function test() {
const CancelToken = axios.CancelToken;
const source = CancelToken.source(); axios("http://localhost:5000/test", {
cancelToken: source.token,
})
.then(r => {
l(r.data);
})
.catch(err => {
if (axios.isCancel(err)) {
l(err.message);
} else {
console.error(err);
// handle error
}
}); source.cancel("abort。");
}
</script>

2

        const CancelToken = axios.CancelToken;
let cancel; axios("http://localhost:5000/test", {
cancelToken: new CancelToken(function executor(c) {
l(`请求结束前`);
cancel = c;
}),
})
.then(r => {
l(r.data);
})
.catch(err => {
if (axios.isCancel(err)) {
l(err.message);
} else {
console.error(err);
// handle error
}
}); cancel(`message`);

axios 中断请求的更多相关文章

  1. axios构建请求池处理全局loading状态&&axios避免重复请求

    很多时候我们能够看到类似进度条一样的东西在页面顶部进行加载,代表页面是否加载完成,或者其他的loading效果,我们当然不可能通过promise.all来讲所有的请求合并到一起然后进行处理,这个时候我 ...

  2. Vue中断axios请求-切换页面+重复请求

    切换页面时中断 一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能, ...

  3. Vue切换页面时中断axios请求

    一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...

  4. Axios源码分析

    Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中. 文档地址:https://github.com/axios/axios axios理解和使用 1.请求配置 { // ...

  5. 异步请求与中断 ( XHR,Axios,Fetch对比 )

    随着AJAX技术的诞生,前端正式进入了局部刷新和前后端分离的新时代,最初的服务请求技术是XHR,随着技术发展和ES6的诞生,jquery ajax,axios,fetch 等技术的产生让前端的异步请求 ...

  6. axos在async模式下如何中断请求

    main.js import axios from 'axios' Vue.prototype.$http = axios Test.vue <template> <div clas ...

  7. 为什么axios请求接口会发起两次请求

    之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事. 首先我们知道 ...

  8. axios基本用法

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...

  9. ASPNET MVC中断请求

    ASPNET MVC如何正确的中断请求? 感觉是这样? 在aspnet开发过程中如果想要中断当前的http处理,以前在aspnet中一直是Response.End(); 在这Response.End( ...

随机推荐

  1. python3 cookie

    最近再次学习python,本来就是一个菜鸟,我按照 Python CGI编程 发现读cookie 读取不了,后来发现它这种写的方式也不怎么靠谱. Python中Cookie模块(python3中为ht ...

  2. Quartz小记(一):Elastic-Job - 分布式定时任务框架

    Elastic-Job是ddframe中dd-job的作业模块中分离出来的分布式弹性作业框架.去掉了和dd-job中的监控和ddframe接入规范部分.该项目基于成熟的开源产品Quartz和Zooke ...

  3. js传递数组

    注意:数组不能直接作为参数传给后台,需要先用JSON处理成数组字符串,传到后台后再转回数组. var arr_str = JSON.stringify(array)

  4. SCF: 简单配置门面[转]

    原文:https://blog.csdn.net/koqizhao/article/details/82178100 Simple Configuration Facade :简单配置门面  是 代码 ...

  5. LIBTUX_CAT:466: ERROR: tpopen TPERMERR xa_open returned XAER_INVAL

    tmboot 启动Tuxedo服务失败,从ULOG日志中看到以下错误: 100534.MATHXH!TMS_ORA10G.22600.4076.0: LIBTUX_CAT:466: ERROR: tp ...

  6. 内核中的锁机制--RCU

    一. 引言 众所周知,为了保护共享数据,需要一些同步机制,如自旋锁(spinlock),读写锁(rwlock),它们使用起来非常简单,而且是一种很有效的同步机制,在UNIX系统和Linux系统中得到了 ...

  7. python使用mysql

    python安装MySQLdb需要ssl,出错,原因如地址: https://stackoverflow.com/questions/46967488/getting-error-403-while- ...

  8. 正确清理binlog日志

    摘要: MySQL中的binlog日志记录了数据库中数据的变动,便于对数据的基于时间点和基于位置的恢复,但是binlog也会日渐增大,占用很大的磁盘空间,因此,要对binlog使用正确安全的方法清理掉 ...

  9. npm安装教程

    一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资 ...

  10. Win10 15063 开始运行不保存历史记录原因和解决方法

    http://www.ampc8.com/thread-23421-1-1.html 在Win10 1703的时候你也许会发现开始运行以后,再次打开就没有任何历史记录了,常规方法是桌面-右键-个性化- ...