vue 断开正在发送的请求_vue 发送请求频繁时取消上一次请求
前言：
在項目中經(jīng)常有一些場景會連續(xù)發(fā)送多個請求，而異步會導(dǎo)致最后得到展示的結(jié)果可能不是最后一次發(fā)送請求返回的結(jié)果，且對性能也有非常大的影響。
場景：
列表式切換商品，有時候上一次請求的結(jié)果非常慢，而我又點(diǎn)了另外一個商品，這時候第二次請求的接口比上一次快，那么就點(diǎn)擊第二次的商品看到的信息卻是上一次的商品信息，這樣的用戶體驗極其不好；
解決方案：
在點(diǎn)擊下一個商品的時候，將上一個商品請求的接口中斷取消請求。
代碼如下：
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) => {
// 返回數(shù)據(jù)進(jìn)行操作
}).catch((err) => {if (axios.isCancel(err)) {
console.log('Rquest canceled', err.message);
//請求如果被取消，這里是返回取消的message
} else {
console.log(err);
}
})
},
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的vue 断开正在发送的请求_vue 发送请求频繁时取消上一次请求的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 「达人分享」什么流不什么组一个成语
- 下一篇： 微信(公众，商户，开放)平台的区别