Mögliche unbehandelte Versprechen Ablehnung während Fang ist vorhanden - Javascript, reagieren native, redux, versprechen

Ich habe folgenden Code erhalten:

export function fetchValueFromApi(){
return function act(dispatch){
dispatch(fetchingLimit);
return fetch("https://someapi/v1/foo/bar?api_key=123456789")
.then(response =>{
console.log("response",response.json());
response.json();
}).then(json =>{
if (json.data()) {
dispatch(receivingValue(json.data.result))
} else {
throw new Error("Error");
}
}).catch(error => dispatch(receivingValueFailed(error)))
}
}

Jetzt weiß ich, dass dieser Aufruf nicht erfolgreich sein wird. Ich erwarte, dass er fehlschlägt und in den Haken geht. Ich erhalte jedoch den folgenden Fehler:

Mögliche unbehandelte Versprechen Ablehnung

Aus irgendeinem Grund schlagen wir nicht auf .catch.

Wie könnte ich das lösen?

Antworten:

Sie treffen also den Haken, nur nicht mit dem Fehler, den Sie erwartet haben.

Der 403 ist kein Fehler, so weit der Abruf istbesorgt, da die Anfrage selbst erfolgreich gestellt wurde (die Antwort entspricht einfach nicht Ihrer Bewerbung). Sie müssen 40X-Fehler selbst behandeln. Und wie Ihr console.log zeigt, tritt die Ausnahme vor Ihrer auf throw new Error ist erreicht.

Ein fetch () -Versprechen wird mit einem TypeError abgelehntwenn ein Netzwerkfehler ist begegnet oder CORS ist auf der Serverseite falsch konfiguriert, obwohl dies bedeutet normalerweise Berechtigungsprobleme oder ähnliches - ein 404 bedeutet nicht Zum Beispiel ein Netzwerkfehler.

Von https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Du solltest

1. Rückkehr response.json() im ersten .then-Handler: .then(response => response.ok && response.json())
2. Fügen Sie im zweiten Handler einen sichereren Scheck hinzu if (json && json.data)
3. Versenden Sie die Fehleraktion, anstatt einen Fehler auszulösen, wenn keine JSON-Daten vorliegen

Du bist nicht returndie Versprechen von Ihnen then Handler, so gibt es keine Verkettung. Der Antwortkörper wird nicht einmal erwartet. Das catch Der Handler ist nicht an das Versprechen gekettet, das er tatsächlich ablehnt. Daher ist der Fehler in der Tat nicht behandelt.

export function fetchValueFromApi(){
return function act(dispatch){
dispatch(fetchingLimit);
return fetch("https://someapi/v1/foo/bar?api_key=123456789")
.then(response => {
var body = response.json();
console.log("response body", body);
return body;
//          ^^^^^^
}).then(json => {
if (json.data ) {
//                       ^
return dispatch(receivingValue(json.data.result))
//              ^^^^^^
} else {
throw new Error("Error");
}
}).catch(error =>
dispatch(receivingValueFailed(error))
)
}
}

Denken Sie daran, dass Pfeilfunktionen den Ausdruckswert nur implizit zurückgeben, wenn Sie die prägnante Körpersyntax verwenden, d. H. Ohne Blockklammern.