如何取消一个 Ajax 请求

jQuery



XMLHttpRequest.abort()

https://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort

var xhr = new XMLHttpRequest(),
method = "GET",
url = "https://developer.mozilla.org/";
xhr.open(method, url, true); xhr.send(); if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
xhr.abort();
}

Axios



Fetch

Promise 无法取消(old)

Promise 可以取消了(AbortController)



AbortController

https://developer.mozilla.org/zh-CN/docs/Web/API/FetchController

const controller = new AbortController();
let signal = controller.signal; const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort'); downloadBtn.addEventListener('click', fetchVideo); abortBtn.addEventListener('click', function() {
controller.abort();
console.log('Download aborted');
}); function fetchVideo() {
//...
fetch(url, {signal}).then(function(response) {
//...
}).catch(function(e) {
reports.textContent = 'Download error: ' + e.message;
})
}

refs



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


如何取消一个 Ajax 请求的更多相关文章

  1. 捣鼓一个Ajax请求管理器

    随着前端技术的不断发展,现在做的项目里很多页面里都会有大量的ajax请求,随之而来就有了一些问题: 1.没必要的ajax请求怎么处理? 2.ajax链式调用怎么维护? ajax链式调用最原始的写法: ...

  2. 实现的一个ajax请求组件 有加载效果

    var zhanglei_Ajax = function(url,data,fn){ var str = '<div class="mask" style="pos ...

  3. 一个ajax请求,接收json数据

    <a id="inviterDel" onclick="delInviter(${item.inviterAddId})">删除</a> ...

  4. Axios 取消 Ajax 请求

    Axios 取消 Ajax 请求 Axios XMLHttpRequest https://caniuse.com/?search=XMLHttpRequest https://developer.m ...

  5. jquery ajax 请求参数详细说明 及 实例

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  6. 关于IE浏览器 ajax 请求返回数据不对的问题

    在使用ajax向后台发送请求的时候,在使用ie 进行调试的时候发现根据条件进行查询时,返回的数据与没有根据条件进行查询时数据相同,也就是条件没有发生作用. 经过同事的帮助发现ajax初始化设置时没有c ...

  7. ajax请求中的6个全局事件

    //事件触发顺序ajaxStart,ajaxSend,ajaxSuccess或ajaxError,ajaxComplete,ajaxStop $(document).ajaxStart(functio ...

  8. jQuery ajax请求错误返回status 0和错误error的问题

    上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...

  9. 2.jquery在js中写标准的ajax请求

    $(function(){ $.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"json" ...

随机推荐

  1. fiddler常用过滤

    一.过滤器 过滤这块集中在request栏目的Filter部分,可以根据自己的需要过滤掉不需要的,里面的每个模块都可以设置,这里只说常用的和注意点. 1.假如我只关心某个域名下的抓包,这时可以利用fi ...

  2. Redis连接池的相关问题分析与总结

    https://mp.weixin.qq.com/s/juvr89lAvM0uuDmyWyvqNA 阿里干货课堂丨Redis连接池的相关问题分析与总结 原创 技术僧 Java进阶与云计算开发 2018 ...

  3. WPF显示命名空间不存在对应名称

    3个办法 1 切换到Release模式,再生成.生成成功后切换回Debug模式就不报错了.这是Release模式下找不到我们自定义的控件导致的报错.所以切换为Release后生成则可以解决此问题. 2 ...

  4. BIO,NIO,AIO 总结

    BIO,NIO,AIO 总结 Java 中的 BIO.NIO和 AIO 理解为是 Java 语言对操作系统的各种 IO 模型的封装.程序员在使用这些 API 的时候,不需要关心操作系统层面的知识,也不 ...

  5. RocketMQ 常用消息类型

    文章首发于公众号<程序员果果> 地址 : https://mp.weixin.qq.com/s/dYqGd9zi2mNelsNNLIribg 消息发送示例 导入依赖: <depend ...

  6. WPF 一种带有多个子集的类ComBox 解决方法

    在最近的工作中遇到很多,类似这种layUI风格的Combox: 因为WPF原本的控件,并不具备这种功能,尝试重写Combox的模板,发现无从下手. 于是尝试从多个控件组合来实现这个功能. 这里使用了P ...

  7. 关于.NET中迭代器的实现以及集合扩展方法的理解

    在C#中所有的数据结构类型都实现IEnumerable或IEnumerable<T>接口(实现迭代器模式),可以实现对集合遍历(集合元素顺序访问).换句话可以这么说,只要实现上面这两个接口 ...

  8. yum.repos.d中的变量($releasever与$basearch)

    今天打算更新一下centos的repo源,把原先国外的repo地址换成国内的,速度快一些.主要替换的文件是/etc/yum.repos.d/Centos-Base.repo .替换的时候,不知道大家有 ...

  9. Docker容器管理平台Rancher高可用部署——看这篇就够了

    记得刚接触Rancher时,看了官方文档云里雾里,跟着官网文档部署了高可用Rancher,发现不管怎么折腾都无法部署成功(相信已尝试的朋友也有类似的感觉),今天腾出空来写个总结,给看到的朋友留个参考( ...

  10. 【STM32】无法下载程序

    错误: 使用keil MDK向STM32下载时出现各种错误 Internal command error.Error:Flash download failed.  Target DLL has be ...