fetch模仿abort要求，疏忽不需要的要求，增添用户体验

2023年6月13日 67次阅读 来源: Weibozzz

有一种场景，在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
    原文地址: https://segmentfault.com/a/1190000015619385
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞