详解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 对象介绍
Jan 20 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
layui表格数据重载
Jul 27 Javascript
js实现无缝轮播图插件封装
Jul 31 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
BBS(php & mysql)完整版(五)
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
python实现bitmap数据结构详解
2014/02/17 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
基于python实现名片管理系统
2018/11/30 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Python 占位符的使用方法详解
2019/07/10 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
python操作redis数据库的三种方法
2020/09/10 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
行政部总经理岗位职责
2014/01/04 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
投标承诺函格式
2015/01/21 职场文书
孝女彩金观后感
2015/06/10 职场文书
区域销售大会开幕词
2016/03/04 职场文书