详解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 相关文章推荐
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
javascript实现在线客服效果
Jul 15 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
页面点击小红心js实现代码
May 26 Javascript
React key值的作用和使用详解
Aug 23 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
php查看session内容的函数
2008/08/27 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
xtree.js 代码
2007/03/13 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
js实现可输入可选择的select下拉框
2016/12/21 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
python中加背景音乐如何操作
2020/07/19 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
求职自荐书范文
2013/12/04 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
会计学专业自荐信
2014/06/25 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
JavaScript执行机制详细介绍
2021/12/06 Javascript