封裝單次請求 重複出現問題

頁面中有多個按鈕，須要解決這多個按鈕屢次點擊重複請求得問題

問題描述：

頁面中有多個按鈕，須要解決這多個按鈕屢次點擊重複請求得問題

解決辦法：

在請求js中進行請求攔截，每次請求加一個惟一標識，若是請求重複，則取消請求，僅把最後一次請求的事件進行下去

代碼：

/ 標識請求
const getRequestIdentify = (config, isReuest = false) => {
  let url = config.url
  if (isReuest) {
    url = config.baseURL + config.url.substring(1, config.url.length)
  }
  return config.method === 'get'
    ? encodeURIComponent(url + JSON.stringify(config.params))  將請求生成惟一標識  encodeURIComponent() 函數可把字符串做爲 URI 組件進行編碼。
    : encodeURIComponent(config.url + JSON.stringify(config.data))
}
// 取消重複請求
const pending = {}
const CancelToken = axios.CancelToken
const removePending = (key, isRequest = false) => {
  if (pending[key] && isRequest) {
    pending[key]('請勿重複請求')
  }
  delete pending[key]
}

請求攔截中進行請求數據處理

// request interceptor
service.interceptors.request.use(
  config => {
    const requestData = getRequestIdentify(config, true)
    removePending(requestData, true)
    config.cancelToken = new CancelToken((c) => {  //取消請求
      pending[requestData] = c
    })
    return config
  },
  error => {
    // do something with request error
    // console.log(error, '請求攔截') // for debug
    return Promise.reject(error)
  }
)