2016-07-21 1 views
3

Nach einer bestimmten Anzahl von Sekunden, wenn ein Abrufversprechen nicht aufgelöst wurde, möchte ich dem Benutzer einen Zeitüberschreitungsfehler anzeigen.Wie fügt man einem Abrufversprechen, das redux verwendet, ein setTimeout hinzu?

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!

Antwort

21

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

wow, das ist nett! wusste nicht über 'Promise.race' – amann

+0

Wow, super, liebe diese Idee, arbeitete wirklich gut! Ich danke dir sehr! –

+5

'fetch' ein Versprechen zurück, so dass Sie nicht ein neues Versprechen erstellen müssen: ' Anfrage lassen = holen ('blah.com/data') ... ' und dann ' Rückkehr Promise.race [ Timeout, Anfrage] ... ' – johans

5

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.

+0

Danke! Ich habe das gerade probiert, aber die Aktion DATA_FETCH_REQUEST löst fortwährend aus und ich bekomme 'Mögliche Unbehandelte Promise Rejection', weil es nicht Teil der Versprechungskette ist. –

+0

Was meinst du mit ununterbrochen? Es sollte jedes Mal ausgelöst werden, wenn Sie die 'getData'-Funktion aufrufen. Es sollte auch in Ordnung sein, dass 'DATA_FETCH_REQUEST' außerhalb der Promise-Kette abgefeuert wird, da es immer unabhängig vom' Fetch' abgefeuert wird (Sie könnten es auch vor dem Aufruf zum Abrufen verschieben). Kannst du herausfinden, woher die Promise-Ablehnung kommt und warum? – amann

+0

Mein schlechtes Ich habe getäuscht, hatte ein ComponentDidUpdate, wo ich die Aktion abrief, die die Schleife verursachte. Das hat funktioniert, vielen Dank. Entschuldigungen Ich musste die .race Antwort markieren, da ich keine Ahnung hatte, dass es existierte und die Idee liebte –

Verwandte Themen