详解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 判断浏览器类型及版本
Feb 21 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
js的touch事件的实际引用
Oct 13 Javascript
javascript制作2048游戏
Mar 30 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
也谈php网站在线人数统计
2008/04/09 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
PyMongo安装使用笔记
2015/04/27 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
使用python为mysql实现restful接口
2018/01/05 Python
python os用法总结
2018/06/08 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
狼和鹿教学反思
2014/02/05 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
爱护公物标语
2014/06/24 职场文书
小学生春游活动方案
2014/08/20 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
春节慰问简报
2015/07/21 职场文书
2015年度女工工作总结
2015/10/22 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫