有一种场景,在select框改变的时候,不管用户怎么连续操作,我只关心用户最后一次的结果,fetch并不是ajax有abort方法,这里模拟了一种,忽略不需要的请求
<div id="app">
<select @change="_getTitle">
<option v-for="(value, key) in titleId">{{value}}</option>
</select>
<div>{{cont}}</div>
</div>
new Vue({
el: '#app',
data: {
nextSeqid: 0,
baseUrl: 'http://www.liuweibo.cn:7654',
titleId:[192,191,190],
cont: '正在请求。。。'
},
created() {
},
methods: {
_getTitle(e) {
const seqid = ++this.nextSeqid;
console.log(seqid, this.nextSeqid, '请求')
let url = `${this.baseUrl}/api/detail?id=${e.target.value}`;
axios.get(url).then(res => {
let {title} = res.data[0];
console.log(seqid, this.nextSeqid, '请求完成')
if (seqid === this.nextSeqid) {
this.cont = title;
}else {
this.cont='正在请求。。。'
}
})
},
}
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。