开发中遇到需要取消请求的功能，，点击终止查询可以取消开始查询请求，再次点击开始查询又可以进行查询。

解决方法：axios官方文档上的CancelToken，一开始用了这个api后，可以成功取消请求，但是再次点击开始查询请求一直失败。原因是因为cancelToken始终没变导致每次点击终止查询调用cancel()方法取消的都是一个cancelToken，所以再次请求的时候会请求失败。所以每次点击开始查询要传一个新的cancelToken，可以参考这个demo：https://codepen.io/dashtinejad/pen/Lxejpq?editors=1011，把Network的网速调成slow 3G测试

axios 取消请求的方法的更多相关文章

  1. axios 取消请求

    解决思路 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. axios官方文档取消请求说明 方法一: const CancelTok ...

  2. Android OkHttp + Retrofit 取消请求的方法

    本文链接 前言 在某一个界面,用户发起了一个网络请求,因为某种原因用户在网络请求完成前离开了当前界面,比较好的做法是取消这个网络请求.对于OkHttp来说,具体是调用Call的cancel方法. 如何 ...

  3. axios 取消请求 （如：用户登录失效，阻止其他请求）

    const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.interceptors.reque ...

  4. jq和axios的取消请求

    场景: 分页: 每次点击分页会发送请求,如果上一次请求还未获取到,下一次请求已经开始且先一步获取到,那么数据上会出现问题. 快速点击会发送多次请求,多次点击的时候一般的做法我们会定义一个flag,此时 ...

  5. axios取消接口请求

    axios取消请求 这里就是分析一下接口请求需要被取消时的一些操作 因为我是用vue写的项目,所以标配用的是axios,怎么在axios中取消已经发送的请求呢? 1.在这之前我们还是先介绍一下原生js ...

  6. 学习axios必知必会（2）~axios基本使用、使用axios前必知细节、axios和实例对象区别、拦截器、取消请求

    一.axios的基本使用: ✿ 使用axios前必知细节: 1.axios 函数对象(可以作为axios(config)函数使用去发送请求,也可以作为对象调用方法axios.request(confi ...

  7. Axios 取消 Ajax 请求

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

  8. vue2.0项目实战（3）使用axios发送请求

    在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...

  9. Vue笔记：使用 axios 发送请求

    在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...

随机推荐

  1. 005_nginx414_nginx 414 Request-URI Too Large

    一.开发请求一个非常长的请求参数 https://jiaju.jyall.me/backend/dish/getSales/?dishId=167271&dishId=166975&d ...

  2. 004_Nginx 499错误的原因及解决方法

    一. 今天进行系统维护,发现了大量的499错误, 499错误 ngx_string(ngx_http_error_495_page), /* 495, https certificate error ...

  3. java多线程快速入门（十六）

    ThreadLocal关键字实现每个线程有自己的变量 package com.cppdy; class Number { private int num; public static ThreadLo ...

  4. OGNL（对象图导航语言）学习

    一.关于OGNL(Object-Graph Navigation Language),一种可以方便地操作对象属性的开源表达式语言. 特点:  1)支持对象方法调用,形式如:objName.method ...

  5. （APIO2014）序列分割

    题解: 我也不知道为啥上午上课讲了我昨天看的3题 这题关键在于发现操作顺序无关的 可以发现最终答案是任意两段乘积的和 那这个东西显然是可以dp的 然后可以斜率优化一波 nklongn 另外上课讲的是当 ...

  6. python全栈开发day24-__new__、__del__、item系列、异常处理

    一.昨日内容回顾 1.反射 用字符串类型的名字,操作命名空间的变量. 反射使用场景:明显的简化代码,能拿到的变量名本来就是一个字符串类型的时候, 用户输入的,文件读入的,网上传输的 2.__call_ ...

  7. 笔记：FastAdmin 上传设置

    笔记:FastAdmin 上传设置 FastAdmin 的上传设置为统一配置,在 application/extra/upload.php 中文件中. <?php //上传配置 return [ ...

  8. Loader监听数据源的变化

    步骤: 1.新建一个继承SQLiteOpenHelper的帮助类 2.在MainActivity中定义LoaderManager和SimpleCursorAdapter 3.按顺序重写如下方法:ini ...

  9. java中使用switch-case的用法及注意事项超全总结

    http://m.blog.csdn.net/blog/tianyazaiheruan/8988420 今天陈红军老师在用到switch的时候,这种设计到最基本的内容,可能忘记它的一些基本语法,出现了 ...

  10. 目标检测——IoU 计算

    Iou 的计算 我们先考虑一维的情况:令 \(A = [x_1,x_2], B = [y_1, y_2]\),若想要 \(A\) 与 \(B\) 有交集,需要满足如下情况: 简言之,要保证 \(A\) ...