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 ...
随机推荐
- C/C++ Qt MdiArea 多窗体组件应用
MDI多窗体组件,主要用于设计多文档界面应用程序,该组件具备有多种窗体展示风格,其实现了在父窗体中内嵌多种子窗体的功能,使用MDI组件需要在UI界面中增加mdiArea控件容器,我们所有的窗体创建与操 ...
- 解决ip和域名都能够ping通但是启动nginx无法访问网页的问题
解决思路 最近双11逛西部数码的官网看看有没有什么服务器优惠的时候,发现了可以申请一个一块钱用一整年的SSL证书,立马心动下单了,想想俺也可以用https装装X了哈哈 不过在部署完证书,并调整ngin ...
- [NOI Online #3 提高组] 魔法值
现在只会\(O(qn^3log)\)的\(40pts\)做法,鸽了. 反正就是预处理之后,去掉一个\(n\). 我预处理了,没去\(n\),hhhh,成功减少了一半的常数.
- 洛谷 P6478 - [NOI Online #2 提高组] 游戏(二项式反演+树形 dp)
题面传送门 没错这就是我 boom0 的那场 NOIOL 的 T3 一年前,我在 NOIOL #2 的赛场上折戟沉沙,一年后,我从倒下的地方爬起. 我成功了,我不再是从前那个我了 我们首先假设 A 拥 ...
- git的使用理解(分支合并的使用理解,多人编程的解决方案)
本文主要记录了对git日常使用的一些理解,主要是对git分支的一些感悟. git强大的版本控制系统,之前也使用过SVN,感觉上git对于多人开发的版本控制更加强大,特别是最近对git分支的使用,更是深 ...
- 电脑盘符为什么从C盘开始?A盘和B盘去哪了?
虽然我们几乎每天都在跟电脑打交道,但是不知道大家有没有过疑惑,为什么电脑盘符是从C盘开始命名呢?有没有A盘和B盘??A盘和B盘去哪了??? 其实,A盘和B盘是真实存在的. 在早期的DOS时代,计算机的 ...
- Shell 输出第五行的内容
目录 Shell 输出第五行的内容 题目 题解-awk 题解-sed Shell 输出第五行的内容 题目 写一个 bash脚本以输出一个文本文件 nowcoder.txt 中第5行的内容. 示例: 假 ...
- 在windows 10家庭版上安装docker的步骤
本人之前写Redis书和Spring Cloud Alibaba书时,发现一些分布式组件更适合安装在linux环境,而在搭建Redis等集群时,更需要linux环境. 本人日常练习代码和写书所用的机器 ...
- day06 python代码操作MySQL
day06 python代码操作MySQL 今日内容 python代码操作MySQL 基于python与MySQL实现用户注册登录 python操作MySQL python 胶水语言.调包侠(贬义词& ...
- 【STM32】使用SDIO进行SD卡读写,包含文件管理FatFs(七)-准备移植FatFs
[STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(一)-初步认识SD卡 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(二)-了解SD总线,命令的相关介绍 [STM3 ...