竞态问题

• 组件卸载时，取消正在进行的请求
• 竞态取消，当上一次请求还没返回时，又发起了下一次请求，则会取消上一次请求

 useEffect(() => {
   let isSubscribe = true;
   setDidSearch(false);
    api({...}).then(() => {
      if (didSearch) {
          ...        
      }
    })
    return () => {
        didSearch = false;
    }
}, [text])

 import axios from "axios";

 const pendingRequest = new Map();

 // 根据请求url和method生成key，后续可考虑加入params
 // TODO key的唯一性定义
 function generateReqKey(config) {
   const { method, url } = config;
   return [method, url].join("&");
 }

 // 从pendingRequest对象中移除请求
 export function removePendingRequest(config) {
   const requestKey = generateReqKey(config);
   if (pendingRequest.has(requestKey)) {
     pendingRequest.delete(requestKey);
   }
 }

 // 检查是否存在重复请求，若存在则取消已发的请求
 function cancelRequest(config) {
   const requestKey = generateReqKey(config);
   if (pendingRequest.has(requestKey)) {
     const cancel = pendingRequest.get(requestKey);
     cancel(requestKey);
     pendingRequest.delete(requestKey);
   }
 }

 // 把当前请求添加到pendingRequest对象中
 export function addPendingRequest(config) {
   cancelRequest(config);
   const requestKey = generateReqKey(config);
   config.cancelToken =
     // config.cancelToken ||
     new axios.CancelToken((cancel) => {
       if (!pendingRequest.has(requestKey)) {
         pendingRequest.set(requestKey, cancel);
       }
     });
 }