详解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 提交和设置表单的值
Dec 19 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
JavaScript数据类型详解
Apr 01 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
论JavaScript模块化编程
Mar 07 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
js实现简单扫雷
Nov 27 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
使用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
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
各种快递查询--Api接口
2016/04/26 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
写的htc的数据表格
2007/01/20 Javascript
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
Python 和 JS 有哪些相同之处
2017/11/23 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
超简单使用Python换脸实例
2019/03/27 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
Python能做什么
2020/06/02 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
工作会议欢迎词
2014/01/16 职场文书
大学班长的职责
2014/01/27 职场文书
授权委托书怎么写
2014/09/25 职场文书
中小学生学籍证明
2014/10/25 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python