鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 求教axios結(jié)合throttle的寫法

求教axios結(jié)合throttle的寫法

使用場景:vue + axios, 彈窗點(diǎn)擊按鈕 > 發(fā)送請求 > 彈窗關(guān)閉,
遇到問題:連續(xù)點(diǎn)擊按鈕,在彈窗關(guān)閉前會發(fā)送多個相同的接口,
解決方案:點(diǎn)擊時,給按鈕一個disabled的標(biāo)記來控制按鈕

問題:

1.如果click事件掛載在div,該怎么解決(div無disabled屬性)
2.考慮采用axios結(jié)合throttle的思想,如何在全局層面上改造axios
回答
編輯回答
喜歡你

要全局修改axios的話,可以參考樓上的,把請求標(biāo)記requesting,存在全局狀態(tài)中,如果有用vuex就存在state里面,然后通過axios的攔截器,在請求之前和請求結(jié)束后,改變requesting。

但是這種做法的話,你只能同時進(jìn)行一個請求,如果遇到要同時進(jìn)行兩個以前的請求,就會失敗。

用戶體驗(yàn)比較好的的做法是請求的時候,彈出一個類似加載中的動畫浮層,讓用戶無法多次點(diǎn)擊按鈕,請求結(jié)束后隱藏。

2018年1月21日 15:15
編輯回答
命于你
data() {
  return {
    requesting: false
  }
},
methods: {
  onButtonClick() {
    if (!this.requesting) {
      request().then(() => { this.requesting = false })
      
      this.requesting = true
    }
  }
}

最簡單的方法,在彈框按鈕回調(diào)函數(shù)里判斷下是否已經(jīng)發(fā)送了請求

2017年10月12日 00:35