详解Axios 如何取消已发送的请求
程序员文章站
2022-03-20 15:13:26
前言
最近在项目中遇到一个问题,在连续发送同一请求时,如果第二次请求比第一次请求快,那么实际显示的是第一次请求的数据,这就会造成数据和我选择的内容不一致的问题。解决的...
前言
最近在项目中遇到一个问题,在连续发送同一请求时,如果第二次请求比第一次请求快,那么实际显示的是第一次请求的数据,这就会造成数据和我选择的内容不一致的问题。解决的方案:在后续发送请求时,判断之前的请求是否完成(同一个接口),如果未完成则立即取消。然后在发送新的请求。
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 } ) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 网页编辑器FCKeditor 2.6.4精简配置方法
下一篇: Android判断登录情况