axios 重複提交

howhy發表於2024-04-15
const { default: axios } = require("axios")
const qs = require('qs')
function regsoleKey(config) {
  const { method, url, params, data } = config;
  return [method, url, qs.stringify(params), qs.stringify(data)].join('&')
}
const reqQueue = new Map();
function addreqQueue(config){
    //呼叫生成唯一標識值函式, 生成 requestKey
    const requestKey = regsoleKey(config);
    //為每個請求建立一個專屬的 CancelToken(用於取消請求)
    config.cancelToken = config.cancelToken || new axios.CancelToken((cancel)=>{
        // 判斷 reqQueue 中是否含有 requestKey, 
        // 將 requestKey 與 CancelToken 以鍵值對的形式儲存到map物件中
        if(!reqQueue.has(requestKey)){
            reqQueue.set(requestKey,cancel)
        }
    });
}
function removereqQueue(config){
  // 標識值
  const requestKey = generateReqKey(config);
  if(reqQueue.has(requestKey)){
      // 取消之前發出請求
     const cancelToken = reqQueue.get(requestKey);
     cancelToken(requestKey);
      // 從佇列移除
     reqQueue.delete(requestKey);
  }
}
serviceAxios.interceptors.request.use(
    function(config) {
        removereqQueue(config); // 檢查是否重複傳送請求
        addreqQueue(config); //將本次請求加入請求佇列
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)
serviceAxios.interceptors.request.use(
    function(config) {
        removereqQueue(config); // 檢查是否重複傳送請求
        addreqQueue(config); //將本次請求加入請求佇列
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

相關文章