详解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 相关文章推荐
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
vue实现Toast组件轻提示
Apr 10 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编实现程动态图像的创建代码
2008/09/28 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
js通过canvas生成图片缩略图
2020/10/02 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
python比较两个列表是否相等的方法
2015/07/28 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
python super的使用方法及实例详解
2019/09/25 Python
python利用platform模块获取系统信息
2020/10/09 Python
python 如何设置守护进程
2020/10/29 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
python实现xml转json文件的示例代码
2020/12/30 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
八一演出活动方案
2014/02/03 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
电视购物广告词
2014/03/19 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript