见代码

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 有没有,怎么实现的更多相关文章

  1. zepto源码研究 - ajax.js(请求过程中的各个事件分析)

    简要:ajax请求具有能够触发各类事件的功能,包括:触发全局事件,请求发送前事件,请求开始事件,请求结束事件等等,贯穿整个ajax请求过程,这是非常有用的,我们可以利用这些事件来做一些非常有意思的事情 ...

  2. mui.ajax返回type为abort

    最近在使用h5和mui开发app,发现mui.ajax有一个小bug 情况一: 参数和请求路径无误,但是总是调起失败的回调函数,打印出 type=abort (终止请求) 原因: mui.ajax默认 ...

  3. jQuery中的Ajax几种请求方式

    1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...

  4. 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  5. Ajax的基本请求/响应模型

    一.Ajax工作核心 Ajax的核心是JavaScript对象XMLHttpRequest(简称XHR).它是一种支持异步请求的技术.可以通过使用XHR对象向服务器提出请求并处理响应,而不阻塞用户. ...

  6. 24_ajax请求_使用axios

    前置说明: 1.React本身只关注页面,并不包含发送ajax请求的代码 2.前端应用需要通过ajax请求与后台进行交互(json数据) 3.React应用中需要集成第三方ajax库(或自己进行封装) ...

  7. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  8. 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  9. 模拟ajax的 script请求

    /** * 模拟ajax的 script请求 * @param {[type]} options [description] * @return {[type]} [description] */ f ...

随机推荐

  1. .NET Core基础篇之:依赖注入DependencyInjection

    依赖注入已经不是什么新鲜话题了,在.NET Framework时期就已经出现了各种依赖注入框架,比如:autofac.unity等.只是在.net core微软将它搬上了台面,不用再依赖第三方组件(那 ...

  2. Identity Server 4 从入门到落地(二)—— 理解授权码模式

    Identity Server 的目的是认证和授权,我们需要理解认证和授权的工作过程.这就需要了解OAuth 2.0的四种授权模式,下面这张图是授权码模式的工作过程,至少我在一开始看得一头雾水: 现在 ...

  3. 2017Java前景怎么样?

    当今社会互联网软件行业属于高薪技术行业,伴随着互联网的发展Java在Web领域的优势也日渐凸显,并且java语言本身就应用最广泛,最高效.据说,全球有25亿Java器件运行着Java,450多万Jav ...

  4. 洛谷 P5249 - [LnOI2019]加特林轮盘赌(期望 dp+高斯消元)

    题面传送门 期望真 nm 有意思,所以蒟蒻又来颓期望辣 先特判掉 \(P_0=0\) 的情况,下面假设 \(P_0\ne 0\). 首先注意到我们每次将加特林对准一个人,如果这个人被毙掉了,那么相当于 ...

  5. 洛谷 P3688 - [ZJOI2017]树状数组(二维线段树+标记永久化)

    题面传送门 首先学过树状数组的应该都知道,将树状数组方向写反等价于前缀和 \(\to\) 后缀和,因此题目中伪代码的区间求和实质上是 \(sum[l-1...n]-sum[r...n]=sum[l-1 ...

  6. 关于ARM的PC指针(什么时候PC+8,PC+4,PC-4,PC-8)转

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.                                                 ...

  7. SQL- case when then else end 用法经验总结

    对case when 的理解总结: 1.then和else后,只能写一条输出语句且输出结果就是新生成列的值;when 后的条件判断可以有多条,且可以多个字段联合判断:end 后的输出也可以有多条,但必 ...

  8. 从零开始学习oracle

    引用博客:https://blog.csdn.net/qq_36998053/article/details/82725765 )Oracle之<环境配置> (二)Oracle之<基 ...

  9. LeetCode 从头到尾打印链表

    LeetCode 从头到尾打印链表 题目描述 输入一个链表头节点,从尾到头反过来返回每个节点的值(用数组返回). 示例 1: 输入:head = [1,3,2] 输出:[2,3,1] 一得之见(Jav ...

  10. A Child's History of England.28

    By such means, and by taxing and oppressing the English people in every possible way, the Red King b ...