详解Axios 如何取消已发送的请求
前言
最近在项目中遇到一个问题,在连续发送同一请求时,如果第二次请求比第一次请求快,那么实际显示的是第一次请求的数据,这就会造成数据和我选择的内容不一致的问题。解决的方案:在后续发送请求时,判断之前的请求是否完成(同一个接口),如果未完成则立即取消。然后在发送新的请求。
Axios介绍
Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。
Axios使用canceltoken取消请求
Axios的canceltokenAPI基于cancelablepromisesproposal,它还处于第一阶段。
可以使用CancelToken.source工厂方法创建canceltoken,像这样:
varCancelToken=axios.CancelToken; varsource=CancelToken.source(); axios.get('/user/12345',{ cancelToken:source.token }).catch(function(thrown){ if(axios.isCancel(thrown)){ console.log('Requestcanceled',thrown.message); }else{ //处理错误 } }); //取消请求(message参数是可选的) source.cancel('Operationcanceledbytheuser.');
2.还可以通过传递一个executor函数到CancelToken的构造函数来创建canceltoken:
varCancelToken=axios.CancelToken; varcancel; axios.get('/user/12345',{ cancelToken:newCancelToken(functionexecutor(c){ //executor函数接收一个cancel函数作为参数 cancel=c; }) }); //取消请求 cancel();
我自己在项目中用的是第二种方案:
提取所有的api进行封装:
importrequestfrom'../utils/request'//配置过的Axios对象 importaxiosfrom'axios' exportfunctiongetLatenessDetailSize(params,that){ returnrequest({ url:'/api/v1/behaviour/latenessDetailSize', method:'post', params:params, cancelToken:newaxios.CancelToken(functionexecutor(c){//设置canceltoken that.source=c; }) }) } exportxxx
具体的业务组件:
import{getLatenessDetail}from"../api"; exportdefault{ data(){ return{ tableData:[], total:0, page:1, loadTable:false, params:{}, source:null } }, methods:{ cancelQuest(){ if(typeofthis.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 } ) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。