有一种场景,在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='正在请求。。。'
          }
        })
      },
    }
  })

Weibozzz
186 声望11 粉丝

前端开发者