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. 初识 Nginx

    Nginx 是一个免费的,开源的,高性能的HTTP服务器和反向代理,以及IMAP / POP3代理服务器. Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名.很多高知名度的网站 ...

  2. 弄懂JDK、JRE和JVM到底是什么 关系区别

    首先是JDKJDK(Java Development Kit) 是 Java 语言的软件开发工具包(SDK).在JDK的安装目录下有一个jre目录,里面有两个文件夹bin和lib,在这里可以认为bin ...

  3. fashion datasets图像检索实践project

    Using Siamese Networks and Pre-Trained Convolutional Neural Networks (CNNs) for Fashion Similarity M ...

  4. 先从一个 libev 的 demo 入手

    最近想研究下 libev 这个网络库,所以先从官方文档一个最简单的 demo 开始,代码如下: //io.c // a single header file is required #include ...

  5. php获取客户端IP地址的方法

    参考:https://www.cnblogs.com/rendd/p/6183094.html <?php function getip() { //strcasecmp 比较两个字符,不区分大 ...

  6. Windows 10 替换 cmd 的命令行工具

    最近找 Windows 10 的命令行工具,发现了 Windows 自带的 PowerShell ,确实功能强大.推荐. 查找方法:搜索,PowserShell, 打开就能用. https://www ...

  7. Renascence架构介绍——文件夹

    这一系列文章是为个人项目作一个介绍.有兴趣的朋友能够关注一下. https://github.com/jxt1234/Renascence 先写个文件夹.以后按文件夹更新 1.自己主动编程体系设想 2 ...

  8. 谈一谈iOS事件的产生和传递

    谈一谈iOS事件的产生和传递 1.事件的产生 发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件队列中. UIApplication会从事件队列中取出最前面的事件,并将事件 ...

  9. Source Insight小技巧:修改Symbol Window的默认宽度

    SI是个好东西,但是源代码窗口左边的符号窗口的默认宽度实在是太小,每次打开一个新的源码窗口都要重新拖放调整,很烦人.下面是一劳永逸调整Symbol Window宽度的方法. 打开一个源码窗口,将Sym ...

  10. ssh连接服务器失败解决记录

    故障:db2inst1用户无法通过ssh连接数据库服务器. 但是root用户可以连接,连接后su – db2inst1用户报错: su: cannot set user id: Resource te ...