Vue使用axios取消上一次请求

项目需求：列表式切换商品，有时候上一次请求的结果非常慢，而我又点了另外一个商品，这时候第二次请求的接口比上一次快，那么就点击第二次的商品看到的信息却是上一次的商品信息，这样的用户体验极其不好；
解决方案：在点击下一个商品的时候，将上一个商品请求的接口中断取消请求。
axios官网给出了取消请求的方法：

方法一：
axios.get('/user/12345', {cancelToken: axios.CancelToken.source().token
}).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// handle error}
});axios.post('/user/12345', {name: 'new name'
}, {cancelToken: axios.CancelToken.source().token
})// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

方法二：
let cancel;
axios.get('/user/12345', {cancelToken: new axios.CancelToken(function executor(c) {// An executor function receives a cancel function as a parametercancel = c;})
});// cancel the request
cancel();

根据项目需求给出解决方案：

vue：
data(){return{source: null, //存放取消的请求方法}
},
methods:{cancelQuest(){if(typeof this.source ==='function'){this.source('终止请求'); //取消请求}},getInfo(id){const _this = this;this.cancelQuest(); //在请求发出前取消上一次未完成的请求；//发送请求this.axios.get(`/markets/tradeInfo/${id}?top=40`,{cancelToken: new this.axios.CancelToken(function executor(c) {_this.source = c;})}).then(res =>{//handle result}).catch(error => {if (this.axios.isCancel(err)) {console.log('Rquest canceled', err.message); //请求如果被取消，这里是返回取消的message} else {//handle errorconsole.log(err);}})}
}

在经过这么处理后，用户点击快时，看到的商品信息就是最后点击的商品的了；如有需要，可以自行封装在axios的业务方法里面。

Vue使用axios取消上一次请求相关推荐

vue 断开正在发送的请求_vue 发送请求频繁时取消上一次请求
前言: 在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到展示的结果可能不是最后一次发送请求返回的结果,且对性能也有非常大的影响. 场景: 列表式切换商品,有时候上一次请求的结果非常慢,而 ...
Vue通过Axios向后台发送Post请求，浏览器Console提示405，后台显示Get请求不支持--解决办法
Vue通过Axios向后台发送Post请求,浏览器Console提示405,后台显示Get请求不支持–解决办法问题场景: axios默认是发送get请求,我要给后台发送一组用户填写的表单数据,逻辑简 ...
vue.js axios实现跨域http请求接口
跨域post实例,用到了qs组件来避开ajax信使请求,并兼容Android. 1 import axios from 'axios'; 2 import qs from 'qs'; 3 4 axio ...
vue 的axios 文件上传
具体方法 Upload(file) { console.log(file.file);//获取文件对象var formData = new FormData();//新建表单对象formData.ap ...
axios之post与get请求
axios之post与get请求 axios之post与get请求,如果觉得本片文章对你有帮助期待您的三连,关注公众号获取更多资讯文章目录 axios之post与get请求前言一.axios是什 ...
一步步带你实现一个简单的express服务器，能让vue通过axios请求将图片上传到阿里云OSS
文章目录前言一.申请阿里云OSS 二.Vue前端读取图片三.将图片base64转成二进制文件四.搭建express服务器五.通过axios给服务器发送请求六.发送图片并上传阿里云我们首先 ...
axios取消接口请求
自己碰到的问题,扒了很多文档才理清楚,当做是笔记记下来说到取消接口请求,可能没碰到这样的坑冷不丁还有点懵,为什么会有取消请求这回事,既然决定要请求这个接口了又要取消它,岂不是有点画蛇添足的操作? 1 ...
vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
【vue】axios和vue-axios请求模块
目录一.axios模块二. axios使用方法 1.创建服务器端Express项目 2.创建服客户端Vite项目 3.在vite客户端安装axios 三.axios的六种请求 1.无参的get请求 ...

Vue使用axios取消上一次请求

Vue使用axios取消上一次请求相关推荐

最新文章

热门文章