ajax 有终止请求 abort 那 axios 有没有,怎么实现
见代码
class View extends Component {
constructor(props){
super(props);
this.state = {
cancel:null,
cancel2:null
}
}
//简易版
async getApi2(url,cfg,headers){
let data = await axios.get(url,{params:cfg},
{
headers: headers
})
return data;
}
// 增加取消版
async getApi2(url,cfg,headers,fn){
const CancelToken = await axios.CancelToken;
let data = await axios.get(url,{
params:cfg,
cancelToken: new CancelToken(function executor(c) {
//取消请求官方提供了方法就是在new一个CancelToken函数的参数,我们主要实现的就是想让 这个参数(函数)c 被外部使用
//所以使用了 第四个参数 函数 使用参数进行返回
fn(c)
})
},
{
headers: headers
})
return data;
}
componentDidMount(){
//如下代码在调用时增加了第四个参数 ,在四个参数中进行重新赋值使用
this.getApi2('/home/mediareports',{
'page_number':1,
'page_size':5
},{},(c)=>{
把参数(函数)c给到state cancel
this.state.cancel = c
}).then((res)=>{
console.log(res.data.data)
})
//以下就可以使用取消终止请求了
// setTimeout( ()=>{
// this.state.cancel()
// }, 100)
this.getApi3('/home/mediareports',{
'page_number':1,
'page_size':5
},{},(c)=>{
this.state.cancel2 = c
}).then((res)=>{
console.log(res.data.data)
})
setTimeout( ()=>{
this.state.cancel2.cancel('请求已取消')
}, 100)
}
async getApi3(url,cfg,headers,fn){
const CancelToken = await axios.CancelToken;
const source = await CancelToken.source();
await fn(source)
let data = await axios.get(url,{
params:cfg,
cancelToken: source.token
},
{
headers: headers
})
return data;
}
componentWillUnmount(){
//取消/home/mediareports这个接口的请求
this.state.cancel()
this.state.cancel2.cancel('请求已取消')
}
render(){
return(
<div>111</div>
)
}
}
ajax 有终止请求 abort 那 axios 有没有,怎么实现的更多相关文章
- zepto源码研究 - ajax.js(请求过程中的各个事件分析)
简要:ajax请求具有能够触发各类事件的功能,包括:触发全局事件,请求发送前事件,请求开始事件,请求结束事件等等,贯穿整个ajax请求过程,这是非常有用的,我们可以利用这些事件来做一些非常有意思的事情 ...
- mui.ajax返回type为abort
最近在使用h5和mui开发app,发现mui.ajax有一个小bug 情况一: 参数和请求路径无误,但是总是调起失败的回调函数,打印出 type=abort (终止请求) 原因: mui.ajax默认 ...
- jQuery中的Ajax几种请求方式
1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- Ajax的基本请求/响应模型
一.Ajax工作核心 Ajax的核心是JavaScript对象XMLHttpRequest(简称XHR).它是一种支持异步请求的技术.可以通过使用XHR对象向服务器提出请求并处理响应,而不阻塞用户. ...
- 24_ajax请求_使用axios
前置说明: 1.React本身只关注页面,并不包含发送ajax请求的代码 2.前端应用需要通过ajax请求与后台进行交互(json数据) 3.React应用中需要集成第三方ajax库(或自己进行封装) ...
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 模拟ajax的 script请求
/** * 模拟ajax的 script请求 * @param {[type]} options [description] * @return {[type]} [description] */ f ...
随机推荐
- 统计学习1:朴素贝叶斯模型(Numpy实现)
模型 生成模型介绍 我们定义样本空间为\(\mathcal{X} \subseteq \mathbb{R}^n\),输出空间为\(\mathcal{Y} = \{c_1, c_2, ..., c_K\ ...
- [洛谷P2000 拯救世界]
生成函数版题. 考虑对于这些条件写出\(OGF\) \(1 + x^6 + x^{12} + x^{18}..... = \frac{1}{1 - x^6}\) \(1 + x + x ^ 2 + x ...
- UOJ #228 - 基础数据结构练习题(势能线段树+复杂度分析)
题面传送门 神仙题. 乍一看和经典题 花神游历各国有一点像,只不过多了一个区间加操作.不过多了这个区间加操作就无法再像花神游历各国那样暴力开根直到最小值为 \(1\) 为止的做法了,稍微感性理解一下即 ...
- DirectX12 3D 游戏开发与实战第九章内容(下)
仅供个人学习使用,请勿转载.谢谢! 9.纹理贴图 学习目标 学习如何将局部纹理映射到网格三角形中 探究如何创建和启用纹理 学会如何通过纹理过滤来创建更加平滑的图像 探索如何使用寻址模式来进行多次贴图 ...
- CentOS6.9 内核升级详解
内核进行的是应用软件和计算机硬件的交互工作在计算机科学中,内核(英语:kernel)又称核心,是一个计算机程序,用来管理软件发出的数据I/O(输入与输出)要求,将这些要求转译为数据处理的指令,交由中央 ...
- Linux-root管理员创建新用户
Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统.用户的账号一方面可以帮助系统管理员对使用系统的用户进行 ...
- SpringBoot Logback 日志配置
目录 前言 日志格式 日志输出 日志轮替 日志级别 日志分组 小结 前言 之前使用 SpringBoot 的时候,总是习惯于将日志框架切换为 Log4j2,可能是觉得比较靠谱,也可能年龄大了比较排斥新 ...
- HTML5 之 FileReader 的使用 (网页上图片拖拽并且预显示可在这里学到) [转载]
转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511416.shtml FileReader 资料(英文) : https://d ...
- 转 onSaveInstanceState()和onRestoreInstanceState()使用详解
转 https://www.jianshu.com/p/27181e2e32d2 背景 如果系统由于系统约束(而不是正常的应用程序行为)而破坏了Activity,那么尽管实际 Activity实例已经 ...
- HttpClient连接池设置引发的一次雪崩
事件背景 我在凤巢团队独立搭建和运维的一个高流量的推广实况系统,是通过HttpClient 调用大搜的实况服务.最近经常出现Address already in use (Bind failed)的问 ...