详解Axios 如何取消已发送的请求

2019-11-19 12:39:54

字体：大中小

来源：转载

供稿：网友

前言

最近在项目中遇到一个问题，在连续发送同一请求时，如果第二次请求比第一次请求快，那么实际显示的是第一次请求的数据，这就会造成数据和我选择的内容不一致的问题。解决的方案：在后续发送请求时，判断之前的请求是否完成（同一个接口），如果未完成则立即取消。然后在发送新的请求。

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            }        )    }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Node.js中的不安全跳转如何防御详解

下一篇：使用Vue做一个简单的todo应用的三种方式的示例代码