vue 断开正在发送的请求_vue 发送请求频繁时取消上一次请求

前言：

在项目中经常有一些场景会连续发送多个请求，而异步会导致最后得到展示的结果可能不是最后一次发送请求返回的结果，且对性能也有非常大的影响。

场景：

列表式切换商品，有时候上一次请求的结果非常慢，而我又点了另外一个商品，这时候第二次请求的接口比上一次快，那么就点击第二次的商品看到的信息却是上一次的商品信息，这样的用户体验极其不好；

解决方案：

在点击下一个商品的时候，将上一个商品请求的接口中断取消请求。

代码如下：

import axios from 'axios'

export default {

data() {

return {

source: null,

}

methods: {

cancelRequest() {

if (typeof this.source === 'function') {

this.source()

}

getProductPackageInfo() {

const _this = this;

this.cancelRequest();

// 取消上一次请求

axios({

method: 'post',

url: this.secondURL.getProductPackageInfo,

data: { name: '小白' },

cancelToken: new axios.CancelToken((c) => {

_this.source = c

}),

})

.then((res) => {

// 返回数据进行操作

}).catch((err) => {if (axios.isCancel(err)) {

console.log('Rquest canceled', err.message);

//请求如果被取消，这里是返回取消的message

} else {

console.log(err);

}

})

vue 断开正在发送的请求_vue 发送请求频繁时取消上一次请求相关推荐

vue 生命周期返回不触发_Vue生命周期activated之返回上一页不重新请求数据操作...
activated: 英文原意:使活动.触发在Vue的生命周期函数中,这个好像用的不是特别多?(也许只是在我的工作中这个用的不多,或者说叫几乎不用这个) 一.需求前不久在项目中有这样一个需求: 在 ...
Vue使用axios取消上一次请求
项目需求:列表式切换商品,有时候上一次请求的结果非常慢,而我又点了另外一个商品,这时候第二次请求的接口比上一次快,那么就点击第二次的商品看到的信息却是上一次的商品信息,这样的用户体验极其不好: 解决方 ...
vue组件一直注册不了_Vue注册组件命名时不能用大写的原因浅析
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得. 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的 ...
axios请求发送两次请求_vue使用axios发送请求，都会发送两次请求
vue 使用axios,每次的请求都会发送两次,第一次的请求头为options CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sha ...
Vue通过Axios向后台发送Post请求，浏览器Console提示405，后台显示Get请求不支持--解决办法
Vue通过Axios向后台发送Post请求,浏览器Console提示405,后台显示Get请求不支持–解决办法问题场景: axios默认是发送get请求,我要给后台发送一组用户填写的表单数据,逻辑简 ...
vue中使用axios请求接口，请求会发送两次
vue中使用axios请求接口,请求会发送两次的问题浏览器分为简单请求以及非简单请求: 解决方案: 跨域请求需要先发一次Option预请求,OPTIONS是检验是否允许跨域的,如果不希望OPTION ...
vue 获取url地址的参数_Vue 网络请求框架 axios 使用教程
点击上方"代码集中营",设为星标优秀文章,第一时间送达! 前期回顾 1. Vue 学习入门指南 2. Vue 入门环境搭建 3. Visual Studio Code 使用指南 ...
vue 无法进入response拦截器_Vue添加请求拦截器
一.现象统一处理错误及配置请求信息二.解决 1.安装 axios , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...
如何在HTTP POST请求中发送参数？
本文翻译自:How are parameters sent in an HTTP POST request? In an HTTP GET request, parameters are sent a ...

vue 断开正在发送的请求_vue 发送请求频繁时取消上一次请求

vue 断开正在发送的请求_vue 发送请求频繁时取消上一次请求相关推荐

最新文章

热门文章