fetch模擬abort請(qǐng)求，忽略不需要的請(qǐng)求，增加用戶體驗(yàn)

StonePanda 發(fā)布于2019-08-22 18:41 / 2241人閱讀

摘要：有一種場(chǎng)景，在框改變的時(shí)候，不管用戶怎么連續(xù)操作，我只關(guān)心用戶最后一次的結(jié)果，并不是有方法，這里模擬了一種，忽略不需要的請(qǐng)求正在請(qǐng)求。。。請(qǐng)求請(qǐng)求完成正在請(qǐng)求。。。

有一種場(chǎng)景，在select框改變的時(shí)候，不管用戶怎么連續(xù)操作，我只關(guān)心用戶最后一次的結(jié)果，fetch并不是ajax有abort方法，這里模擬了一種，忽略不需要的請(qǐng)求


    
    {{cont}}

new Vue({
    el: "#app",
    data: {
      nextSeqid: 0,
      baseUrl: "http://www.liuweibo.cn:7654",
      titleId:[192,191,190],
      cont: "正在請(qǐng)求。。。"
    },
    created() {
    },
    methods: {
      _getTitle(e) {
        const seqid = ++this.nextSeqid;
        console.log(seqid, this.nextSeqid, "請(qǐng)求")
        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, "請(qǐng)求完成")
          if (seqid === this.nextSeqid) {
            this.cont = title;
          }else {
            this.cont="正在請(qǐng)求。。。"
          }
        })
      },
    }
  })

GPU云服務(wù)器云服務(wù)器模擬HTTP請(qǐng)求模擬POST請(qǐng)求如何模擬webrtc請(qǐng)求 php模擬網(wǎng)頁(yè)請(qǐng)求

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96091.html

相關(guān)文章

頁(yè)面跳轉(zhuǎn)時(shí)，點(diǎn)擊上報(bào)丟失問(wèn)題解析

摘要：背景最近在工作中，遇到了頁(yè)面跳轉(zhuǎn)時(shí)點(diǎn)擊上報(bào)丟失的問(wèn)題，突出表現(xiàn)在微信的上，上報(bào)后直接跳轉(zhuǎn)的失敗率達(dá)到了驚人的。對(duì)這三種失效的方案有興趣的可以看頁(yè)面跳轉(zhuǎn)時(shí)，統(tǒng)計(jì)數(shù)據(jù)丟失問(wèn)題探討把要跳轉(zhuǎn)的放到中，然后在下一個(gè)頁(yè)面上上報(bào)點(diǎn)擊。背景最近在工作中，遇到了頁(yè)面跳轉(zhuǎn)時(shí)點(diǎn)擊上報(bào)丟失的問(wèn)題，突出表現(xiàn)在微信ios的webview上，上報(bào)后直接跳轉(zhuǎn)的失敗率達(dá)到了驚人的93%。喝口水壓壓驚，開(kāi)始逐步分析問(wèn)...

Bmob 2019-08-26 11:36 評(píng)論0 收藏0
頁(yè)面跳轉(zhuǎn)時(shí)，點(diǎn)擊上報(bào)丟失問(wèn)題解析

摘要：背景最近在工作中，遇到了頁(yè)面跳轉(zhuǎn)時(shí)點(diǎn)擊上報(bào)丟失的問(wèn)題，突出表現(xiàn)在微信的上，上報(bào)后直接跳轉(zhuǎn)的失敗率達(dá)到了驚人的。對(duì)這三種失效的方案有興趣的可以看頁(yè)面跳轉(zhuǎn)時(shí)，統(tǒng)計(jì)數(shù)據(jù)丟失問(wèn)題探討把要跳轉(zhuǎn)的放到中，然后在下一個(gè)頁(yè)面上上報(bào)點(diǎn)擊。背景最近在工作中，遇到了頁(yè)面跳轉(zhuǎn)時(shí)點(diǎn)擊上報(bào)丟失的問(wèn)題，突出表現(xiàn)在微信ios的webview上，上報(bào)后直接跳轉(zhuǎn)的失敗率達(dá)到了驚人的93%。喝口水壓壓驚，開(kāi)始逐步分析問(wèn)...

gclove 2019-08-01 18:34 評(píng)論0 收藏0
fetch使用的常見(jiàn)問(wèn)題及其解決辦法

首先聲明一下，本文不是要講解fetch的具體用法，不清楚的可以參考MDN fetch教程。引言說(shuō)道fetch就不得不提XMLHttpRequest了，XHR在發(fā)送web請(qǐng)求時(shí)需要開(kāi)發(fā)者配置相關(guān)請(qǐng)求信息和成功后的回調(diào)，盡管開(kāi)發(fā)者只關(guān)心請(qǐng)求成功后的業(yè)務(wù)處理，但是也要配置其他繁瑣內(nèi)容，導(dǎo)致配置和調(diào)用比較混亂，也不符合關(guān)注分離的原則；fetch的出現(xiàn)正是為了解決XHR存在的這些問(wèn)題。例如下面代碼： f...

pubdreamcc 2019-08-20 14:34 評(píng)論0 收藏0
fetch使用的常見(jiàn)問(wèn)題及其解決辦法

摘要：首先聲明一下，本文不是要講解的具體用法，不清楚的可以參考教程。該模式用于跨域請(qǐng)求但是服務(wù)器不帶響應(yīng)頭，也就是服務(wù)端不支持這也是的特殊跨域請(qǐng)求方式其對(duì)應(yīng)的為。首先聲明一下，本文不是要講解fetch的具體用法，不清楚的可以參考 MDN fetch教程。 fetch默認(rèn)不攜帶cookie 配置其 credentials 項(xiàng)，其有3個(gè)值： omit: 默認(rèn)值，忽略cookie的發(fā)送 sam...

pkwenda 2019-08-23 17:52 評(píng)論0 收藏0
99%的程序都沒(méi)有考慮的網(wǎng)絡(luò)異常

摘要：本文由云社區(qū)發(fā)表絕大多數(shù)程序只考慮了接口正常工作的場(chǎng)景，而用戶在使用我們的產(chǎn)品時(shí)遇到的各類異常，全都丟在看似的中。在面板，還可以對(duì)請(qǐng)求進(jìn)行暫停延遲等網(wǎng)絡(luò)異常的模擬。小程序?qū)崿F(xiàn)最后，留一道思考題。本文由云+社區(qū)發(fā)表絕大多數(shù)程序只考慮了接口正常工作的場(chǎng)景，而用戶在使用我們的產(chǎn)品時(shí)遇到的各類異常，全都丟在看似 ok 的 try catch 中。如果沒(méi)有做好異常的兼容和兜底處理，會(huì)極大的影...

HollisChuang 2019-08-23 14:19 評(píng)論0 收藏0