详解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 29 Javascript
js播放wav文件(源码)
Apr 22 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
Three.js学习之几何形状
Aug 01 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
js实现适配移动端的拖动效果
Jan 13 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
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
python使用fork实现守护进程的方法
2017/11/16 Python
在django view中给form传入参数的例子
2019/07/19 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
python def 定义函数,调用函数方式
2020/06/02 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
医院工作检讨书范文
2014/02/10 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
员工离职感谢信
2015/01/22 职场文书
先进个人总结范文
2015/02/15 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
对讲机知识
2022/04/07 无线电