reduxを使用するfetch promiseにsetTimeoutを追加するにはどうすればよいですか？

Question

フェッチの約束が解決されていない場合、一定の時間が経過すると、ユーザーにタイムアウトエラーが表示されます。

私はここで取得するのsetTimeoutを追加するいくつかの良い例を見てきました： https://github.com/github/fetch/issues/175

しかし、どのように私はまた、Reduxのを使用してフェッチ約束をタイムアウトに扱うことができますか？例えば。

export function getData() { 
    return (dispatch, getState) => { 
    fetch('blah.com/data') 
    .then(response => response.json()) 
    .then(json => dispatch(getDataSuccess(json))) 
    .catch(
     error => { 
     console.log(error) 
     } 
    ) 
     dispatch({ 
     type: DATA_FETCH_REQUEST 
     }) 
    } 
} 

お読みいただきありがとうございます！

あなたが言及したgithubのからの抜粋に基づいて

Answer 1

私はPromise.raceを使用する理由が欲しいと思っていましたが、この使用例では完全に機能します。 Promise.raceは、最初の解決または最初の拒否を待ちます。したがって、拒否が最初に発生すると、Promise.raceでthenが発生することはありません。詳細はこちらhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race。申し訳ありませんが、コードをテストする機会はありませんでした。

export function getData() { 
    return (dispatch, getState) => { 
    let timeout = new Promise((resolve, reject) => { 
     setTimeout(reject, 300, 'request timed out'); 
    }) 
    let fetch = new Promise((resolve, reject) => { 
     fetch('blah.com/data') 
     .then(response => response.json()) 
     .then(json => resolve(json)) 
     .catch(reject) 
    }) 
    return Promise 
     .race([timeout, fetch]) 
     .then(json => dispatch(getDataSuccess(json))) 
     .catch(err => dispatch(getDataTimeoutOrError(err))) 
    } 
} 

Answer 2

、あなたはおそらくこのような何かを行うことができます：あなたは、要求が失敗したユーザに情報を表示したい場合は、あなたが処理したいかもしれません

function timeoutPromise(ms, promise) { 
    return new Promise((resolve, reject) => { 
    const timeoutId = setTimeout(() => { 
     reject(new Error('Timeout')); 
    }, ms); 
    promise.then(
     (res) => { 
     clearTimeout(timeoutId); 
     resolve(res); 
     }, 
     (err) => { 
     clearTimeout(timeoutId); 
     reject(err); 
     } 
    ); 
    }) 
} 

export function getData() { 
    return (dispatch, getState) => { 
    dispatch({type: DATA_FETCH_REQUEST}); 

    timoutPromise(5000, fetch('blah.com/data')) 
    .then(response => response.json()) 
    .then(json => dispatch(getDataSuccess(json))) 
    .catch(
     error => { 
     // Change this as necessary 
     dispatch({type: DATA_FETCH_FAILED}); 
     console.log(error); 
     } 
    ); 
    } 
} 

タイプDATA_FETCH_FAILEDのアクションです。