详解Axios 如何取消已发送的请求


Posted in Javascript onOctober 20, 2018

前言

最近在项目中遇到一个问题,在连续发送同一请求时,如果第二次请求比第一次请求快,那么实际显示的是第一次请求的数据,这就会造成数据和我选择的内容不一致的问题。解决的方案:在后续发送请求时,判断之前的请求是否完成(同一个接口),如果未完成则立即取消。然后在发送新的请求。

Axios 介绍

Axios是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

Axios 使用 cancel token 取消请求

Axios的 cancel token API 基于cancelable promises proposal,它还处于第一阶段。

可以使用 CancelToken.source 工厂方法创建 cancel token,像这样:

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
 cancelToken: source.token
}).catch(function(thrown) {
 if (axios.isCancel(thrown)) {
  console.log('Request canceled', thrown.message);
 } else {
  // 处理错误
 }
});

// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');

2.还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
 cancelToken: new CancelToken(function executor(c) {
  // executor 函数接收一个 cancel 函数作为参数
  cancel = c;
 })
});

// 取消请求
cancel();

我自己在项目中用的是第二种方案:

提取所有的 api 进行封装:

import request from '../utils/request' // 配置过的Axios 对象
import axios from 'axios' 

export function getLatenessDetailSize(params, that) { 
  return request({
    url: '/api/v1/behaviour/latenessDetailSize', 
    method: 'post',
    params: params,
    cancelToken: new axios.CancelToken(function executor(c) { // 设置 cancel token
      that.source = c;
    })
  })
}

export xxx

具体的业务组件:

import { getLatenessDetail } from "../api";
export default {
    data() {
      return {
        tableData: [],
        total: 0,
        page: 1,
        loadTable: false,
        params: { },
        source: null
      }
    },
    methods: {
      cancelQuest() {
        if (typeof this.source === 'function') {
          this.source('终止请求'); //取消请求
        }
      },
      getTableData(val) {
        this.cancelQuest() // 请求发送前调用
        this.page = val
        this.loadTable = true
        getLatenessDetail(this.params, (val - 1) * 10, this)
          .then(
            res => {
              this.loadTable = false
              this.tableData = res.data
            }
        )
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
js匿名函数使用&传参(实例)
Sep 08 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 #Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 #Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 #Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 #Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 #Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 #Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 #Javascript
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
python字符串连接方式汇总
2014/08/21 Python
python图片验证码生成代码
2016/07/02 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
逻辑链路控制协议
2016/10/01 面试题
信息与计算科学专业推荐信
2014/02/23 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
JavaScript实现两个数组的交集
2022/03/25 Javascript
深入理解pytorch库的dockerfile
2022/06/10 Python