Wie fügt man einem Abrufversprechen, das redux verwendet, ein setTimeout hinzu?

Question

Nach einer bestimmten Anzahl von Sekunden, wenn ein Abrufversprechen nicht aufgelöst wurde, möchte ich dem Benutzer einen Zeitüberschreitungsfehler anzeigen.

Ich habe einige gute Beispiele für das Hinzufügen eines SetTimeout hier holen gesehen: https://github.com/github/fetch/issues/175

Aber wie kann ich Griff ein Versprechen holen Timeout, die auch redux verwendet? Z.B.

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 
     }) 
    } 
} 

Danke fürs Lesen!

Answer 1

Ich habe es schon sehnsüchtig, einen Grund zu haben, Promise.race zu verwenden, es funktioniert perfekt für diesen Anwendungsfall. Promise.race wartet auf die erste oder erste Ablehnung. Wenn also die Ablehnung zuerst ausgelöst wird, wird die then auf Promise.race nicht ausgelöst. Mehr hier https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race. Entschuldigung, ich hatte keine Chance, den Code zu testen.

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

Basierend auf dem Ausschnitt aus GitHub Sie erwähnt haben, können Sie wahrscheinlich etwas tun, wie folgt aus:

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); 
     } 
    ); 
    } 
} 

Wenn Sie eine Information an den Benutzer angezeigt werden soll, dass die Anforderung fehlgeschlagen ist, können Sie die zu handhaben möchten Aktion mit dem Typ DATA_FETCH_FAILED.