fetch模擬abort請求，忽略不需要的請求，增加用戶體驗

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

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

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


    
    {{cont}}

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="正在請求。。。"
          }
        })
      },
    }
  })

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96091.html

相關(guān)文章

頁面跳轉(zhuǎn)時，點擊上報丟失問題解析

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

Bmob 2019-08-26 11:36 評論0 收藏0
頁面跳轉(zhuǎn)時，點擊上報丟失問題解析

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

gclove 2019-08-01 18:34 評論0 收藏0
fetch使用的常見問題及其解決辦法

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

pubdreamcc 2019-08-20 14:34 評論0 收藏0
fetch使用的常見問題及其解決辦法

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

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

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

HollisChuang 2019-08-23 14:19 評論0 收藏0