React-Redux刪除HTTP請求

我正在構建一個React-Redux應用程序，該應用程序顯示一個取消按鈕，同時某個HTTP請求正在進行中。如果請求成功執行，UI會顯示結果，如果用戶按下取消按鈕，UI將顯示不同的內容。React-Redux刪除HTTP請求

現在我正在使用以下函數啓動我的請求並在請求完成後更新我的Redux存儲。

export function doFetch(url) { 
    return dispatch => { 
     fetch(url) 
      .then((json) => dispatch({type: types.MY_SUCCESS_ACTION}, json)) 
      .catch((error) => dispatch({type: types.MY_FAILURE_ACTION, error})); 
    } 
}

現在上面的代碼不處理使用單擊取消按鈕的情況。現在ES7正在與cancelable promises做一些工作，這可能適合我的用例，因爲那時我會提到我的請求許諾，如果用戶點擊取消按鈕，我可以取消該請求。

雖然我在此期間該如何做到這一點。我需要某種方式，以便如果用戶點擊取消按鈕，我可以派遣一個動作，這會放棄當前的HTTP請求。

解決方案

import Bluebird from 'bluebird'; 
Bluebird.config({ 
    cancellation: true 
}); 
fetch.promise = Bluebird; 
let curReqPromises = [];  

function doFetch(url) { 
     return dispatch => { 
      curReqPromises.push(bluebirdRequest(url) 
       .then((json) => dispatch({type: types.MY_SUCCESS_ACTION}, json)) 
       .catch((error) => dispatch({type: types.MY_FAILURE_ACTION, error})); 
     } 
    } 

    function bluebirdRequest(url) { 
     return new Bluebird((resolve, reject, onCancel) => { 
      makeFetch(url) 
       .then((json) => resolve(json)) 
       .catch((error) => reject(json)); 

      onCancel(() => { 
       console.log('I was cancelled'); 
      }); 
     }); 
    }

來源

2016-09-26 frankgreco

有一對夫婦的方式來做出承諾撤銷。

使用rxjs
使用bluebird

如果你沒有興趣做任何然後通過創建一個取消動作，然後忽略這個結果手動照顧取消其中之一當狀態爲cancelled時取回。一旦承諾解決，您可以將狀態重置爲notCancelled，但避免獲取狀態突變。這很麻煩，這是rxjs或藍鳥的賣點之一，它們都具有取消內置。

來源

2016-09-26 20:42:33 CallMeNorm

我最終使用藍鳥。看我編輯我的解決方案。 – frankgreco

React-Redux刪除HTTP請求

回答

相關問題