創建react中 函數請求疊加只會請求一次 和 對象銷燬後中斷接口回調的方法

// 關於接口請求方法重複運行的問題 確保每次接口返回的都是最後一次請求執行
export const SingleAction = function(Action: (...param:any)=> Promise<any>){
  // 創建唯一值
  let AccessNewTime: number = 0;;
  return function(...param: any){
    let FuncAccessNewTime = AccessNewTime = (new Date()).getTime();
    return Action(...param).then((res: any)=> {
      if( FuncAccessNewTime !== AccessNewTime ) return new Promise(()=>{});
      return res.data;
    });
  }
}


// 在react內部創建的 可以在組件被刪除後才運行的Promise類型函數作阻斷
export const StopPromise = function(){
  const stopPromise = useRef(false);
  useEffect(()=>{
    return function(){
      stopPromise.current = true;
    }
  }, [])
  return (res: any) => { 
    if( stopPromise.current ) 
      return new Promise(()=> {});
    return res;
  };
}

調用方法

// 產品類型統計
const single_circuitTypeStatis = SingleAction(circuitTypeStatis);
const  _circuitTypeStatis = function(province: string, stop: (param: any)=> any ,sets: any[]) {
  single_circuitTypeStatis(province)
    .then(stop)
    .then((res: any) => {
      sets.forEach((set: any)=> { set(res) });
    })
    .catch(err => {
      console.log(err);
    });
}



const stopPromise = StopPromise()

  useEffect (()=> { 
    _circuitTypeStatis(cityid || province, stopPromise, [setData])
  }, [province, cityid]);

都是僞代碼  不過  不難看明白。。。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章