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

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

使用場(chǎng)景：vue + axios, 彈窗點(diǎn)擊按鈕 > 發(fā)送請(qǐng)求 > 彈窗關(guān)閉，
遇到問(wèn)題：連續(xù)點(diǎn)擊按鈕，在彈窗關(guān)閉前會(huì)發(fā)送多個(gè)相同的接口，
解決方案：點(diǎn)擊時(shí)，給按鈕一個(gè)disabled的標(biāo)記來(lái)控制按鈕

問(wèn)題：

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

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

但是這種做法的話，你只能同時(shí)進(jìn)行一個(gè)請(qǐng)求，如果遇到要同時(shí)進(jìn)行兩個(gè)以前的請(qǐng)求，就會(huì)失敗。

用戶體驗(yàn)比較好的的做法是請(qǐng)求的時(shí)候，彈出一個(gè)類似加載中的動(dòng)畫浮層，讓用戶無(wú)法多次點(diǎn)擊按鈕，請(qǐng)求結(jié)束后隱藏。

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

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

2017年10月12日 00:35