详解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 相关文章推荐
ie8本地图片上传预览示例代码
Jan 12 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 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
用户的详细注册和判断
2006/10/09 PHP
两个开源的Php输出Excel文件类
2010/02/08 PHP
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
深入理解python函数递归和生成器
2016/06/06 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
python破解zip加密文件的方法
2018/05/31 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
Python自动抢红包教程详解
2019/06/11 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
python文件路径操作方法总结
2020/12/21 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
数控专业推荐信范文
2013/12/02 职场文书
致运动员的广播稿
2015/08/19 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android