import { useRef, useCallback } from 'react';
// 用于給一個(gè)異步函數(shù)增加競(jìng)態(tài)鎖，防止并發(fā)執(zhí)行。
function useLockFn<P extends any[] = any[], V extends any = any>(fn: (...args: P) => Promise<V>) {
  // 是否現(xiàn)在處于一個(gè)鎖中
  const lockRef = useRef(false);
  // 返回的是增加了競(jìng)態(tài)鎖的函數(shù)
  return useCallback(
    async (...args: P) => {
      // 判斷請(qǐng)求是否正在進(jìn)行
      if (lockRef.current) return;
      // 請(qǐng)求中
      lockRef.current = true;
      try {
        // 執(zhí)行原有請(qǐng)求
        const ret = await fn(...args);
        // 請(qǐng)求完成，狀態(tài)鎖設(shè)置為 false
        lockRef.current = false;
        return ret;
      } catch (e) {
        // 請(qǐng)求失敗，狀態(tài)鎖設(shè)置為 false
        lockRef.current = false;
        throw e;
      }
    },
    [fn],
  );
}
export default useLockFn;

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.post('/user/12345', {
  name: 'gopal'
}, {
  cancelToken: source.token
})
source.cancel('Operation canceled by the user.'); // 取消請(qǐng)求，參數(shù)是可選的

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});
cancel(); // 取消請(qǐng)求

function generateReqKey(config) {
  const { method, url, params, data } = config;
  return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
}

const pendingRequest = new Map();
function addPendingRequest(config) {
  const requestKey = generateReqKey(config);
  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
    if (!pendingRequest.has(requestKey)) {
       pendingRequest.set(requestKey, cancel);
    }
  });
}

function removePendingRequest(config) {
  const requestKey = generateReqKey(config);
  if (pendingRequest.has(requestKey)) {
     const cancelToken = pendingRequest.get(requestKey);
     cancelToken(requestKey);
     pendingRequest.delete(requestKey);
  }
}

axios.interceptors.request.use(
  function (config) {
    removePendingRequest(config); // 檢查是否存在重復(fù)請(qǐng)求，若存在則取消已發(fā)的請(qǐng)求
    addPendingRequest(config); // 把當(dāng)前請(qǐng)求信息添加到pendingRequest對(duì)象中
    return config;
  },
  (error) => {
     return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  (response) => {
     removePendingRequest(response.config); // 從pendingRequest對(duì)象中移除請(qǐng)求
     return response;
   },
   (error) => {
      removePendingRequest(error.config || {}); // 從pendingRequest對(duì)象中移除請(qǐng)求
      if (axios.isCancel(error)) {
        console.log("已取消的重復(fù)請(qǐng)求：" + error.message);
      } else {
        // 添加異常處理
      }
      return Promise.reject(error);
   }
);