见代码

  1. class View extends Component {
  2. constructor(props){
  3. super(props);
  4. this.state = {
  5. cancel:null,
  6. cancel2:null
  7. }
  8. }
  9. //简易版
  10. async getApi2(url,cfg,headers){
  11. let data = await axios.get(url,{params:cfg},
  12. {
  13. headers: headers
  14. })
  15. return data;
  16. }
  17. // 增加取消版
  18. async getApi2(url,cfg,headers,fn){
  19. const CancelToken = await axios.CancelToken;
  20. let data = await axios.get(url,{
  21. params:cfg,
  22. cancelToken: new CancelToken(function executor(c) {
  23. //取消请求官方提供了方法就是在new一个CancelToken函数的参数,我们主要实现的就是想让 这个参数(函数)c 被外部使用
  24. //所以使用了 第四个参数 函数 使用参数进行返回
  25. fn(c)
  26. })
  27. },
  28. {
  29. headers: headers
  30. })
  31. return data;
  32. }
  33. componentDidMount(){
  34. //如下代码在调用时增加了第四个参数 ,在四个参数中进行重新赋值使用
  35. this.getApi2('/home/mediareports',{
  36. 'page_number':1,
  37. 'page_size':5
  38. },{},(c)=>{
  39. 把参数(函数)c给到state cancel
  40. this.state.cancel = c
  41. }).then((res)=>{
  42. console.log(res.data.data)
  43. })
  44. //以下就可以使用取消终止请求了
  45. // setTimeout( ()=>{
  46. // this.state.cancel()
  47. // }, 100)
  48. this.getApi3('/home/mediareports',{
  49. 'page_number':1,
  50. 'page_size':5
  51. },{},(c)=>{
  52. this.state.cancel2 = c
  53. }).then((res)=>{
  54. console.log(res.data.data)
  55. })
  56. setTimeout( ()=>{
  57. this.state.cancel2.cancel('请求已取消')
  58. }, 100)
  59. }
  60. async getApi3(url,cfg,headers,fn){
  61. const CancelToken = await axios.CancelToken;
  62. const source = await CancelToken.source();
  63. await fn(source)
  64. let data = await axios.get(url,{
  65. params:cfg,
  66. cancelToken: source.token
  67. },
  68. {
  69. headers: headers
  70. })
  71. return data;
  72. }
  73. componentWillUnmount(){
  74. //取消/home/mediareports这个接口的请求
  75. this.state.cancel()
  76. this.state.cancel2.cancel('请求已取消')
  77. }
  78. render(){
  79. return(
  80. <div>111</div>
  81. )
  82. }
  83. }

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. 洛谷 P4463 - [集训队互测 2012] calc(多项式)

    题面传送门 & 加强版题面传送门 竟然能独立做出 jxd 互测的题(及其加强版),震撼震撼(((故写题解以祭之 首先由于 \(a_1,a_2,\cdots,a_n\) 互不相同,故可以考虑求出 ...

  2. 关于 n 个 [0,1] 的随机变量第 k 小的期望值

    今天做到一道题,感觉里面一个结论有点意思,就到网上扒了篇证明(bushi)下来了. 知乎回答习惯,先抛结论,再给证明(大雾 结论:对于 \(n\) 个取值范围为 \([0,1]\) 的随机变量 \(x ...

  3. DP 做题记录 II.

    里面会有一些数据结构优化 DP 的题目(如 XI.),以及普通 DP. *I. P3643 [APIO2016]划艇 题意简述:给出序列 \(a_i,b_i\),求出有多少序列 \(c_i\) 满足 ...

  4. SQLite3 约束和简单命令

    安装sqlite3,配置环境变量. 1.打开数据库 sqlite3.exe db_name.db 2.常用命令 .tables 查看所有表 .headers on 设置显示表头 .schema tab ...

  5. jupyter 远程访问

    Jupyter 远程访问 jupyter 远程访问的工作方法是,在本地通过浏览器打开jupyter,但是代码和服务运行在远程集群中. 集群设置 首先需要确保集群中安装有python和jupyter. ...

  6. 【GS文献】植物育种中基因组选择的方法、模型及展望

    目录 1. GS/GP在植物育种中的角色 2. GP模型应用 3. GP模型的准确性 4. 植物育种的GS展望 5. 小结 Genomic SelectioninPlant Breeding: Met ...

  7. Linux Alpine安装 Nginx

    Linux Alpine安装 Nginx 安装需要编译Nginx的扩展 apk add wget gcc g++ make 安装Nginx URL重定向,正则表达式模块pcre Pcre 源码下载地址 ...

  8. cvc-complex-type.2.3: Element 'servlet' cannot have character [children], because the type's content

    错误原因:粘贴代码 <servlet> <servlet-name>barServlet</servlet-name> <servlet-class>S ...

  9. Assertion failure in -[UISectionRowData refreshWithSection:tableView:tableViewRowData:], /Source

    1. *** Assertion failure in -[UISectionRowData refreshWithSection:tableView:tableViewRowData:], /Sou ...

  10. Linux学习 - 文件系统属性chattr权限

    change file attributes on 啊linux file system 1 功能 可以防止误操作 2 chattr命令格式 chattr [+-=] [选项] 文件或目录名 + 增加 ...