详解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 相关文章推荐
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
js取整数、取余数的方法
May 11 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
javascript运动详解
Jul 06 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 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
层叠菜单的动态生成
2006/10/09 PHP
一个php作的文本留言本的例子(五)
2006/10/09 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python脚本爬取字体文件的实现方法
2017/04/29 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
大学生个人求职信范文
2013/09/21 职场文书
活动邀请函范文
2014/01/19 职场文书
思想品德自我评价
2014/02/04 职场文书
物理教学随笔感言
2014/02/22 职场文书
出生证明公证书
2014/04/09 职场文书
优秀大学生自荐信
2015/03/26 职场文书
合作意向书怎么写
2019/06/24 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js