Wie man Fehler 422 mit Redux/Axios fängt und handhabt?

Question

Ich habe eine Aktion, die eine POST Anfrage an den Server macht, um das Passwort eines Benutzers zu aktualisieren, aber ich kann den Fehler im verketteten catch-Block nicht verarbeiten.

return axios({ 
    method: 'post', 
    data: { 
    password: currentPassword, 
    new_password: newPassword 
    }, 
    url: `path/to/endpoint` 
}) 
.then(response => { 
    dispatch(PasswordUpdateSuccess(response)) 
}) 
.catch(error => { 
    console.log('ERROR', error) 
    switch (error.type) { 
    case 'password_invalid': 
     dispatch(PasswordUpdateFailure('Incorrect current password')) 
     break 
    case 'invalid_attributes': 
     dispatch(PasswordUpdateFailure('Fields must not be blank')) 
     break 
    } 
}) 

Wenn ich den Fehler protokollieren ist es das, was ich sehe:

Wenn ich die Registerkarte Netzwerk prüfe ich den Antworttext sehen können, aber aus irgendeinem Grund gelange ich kann nicht die Werte!

Habe ich einen Fehler unwissentlich irgendwo gemacht? Weil ich andere Fehler von verschiedenen Anfragen in Ordnung behandle, aber scheinbar nicht funktionieren kann.

Answer 1

Axios analysiert wahrscheinlich die Antwort. Ich greife auf die Fehler wie dies in meinem Code:

axios({ 
    method: 'post', 
    responseType: 'json', 
    url: `${SERVER_URL}/token`, 
    data: { 
    idToken, 
    userEmail 
    } 
}) 
.then(response => { 
    dispatch(something(response)); 
}) 
.catch(error => { 
    dispatch({ type: AUTH_FAILED }); 
    dispatch({ type: ERROR, payload: error.data.error.message }); 
}); 

Aus der Dokumentation:

Die Antwort auf eine Anfrage enthält die folgenden Informationen.

{ 
    // `data` is the response that was provided by the server 
    data: {}, 

    // `status` is the HTTP status code from the server response 
    status: 200, 

    // `statusText` is the HTTP status message from the server response 
    statusText: 'OK', 

    // `headers` the headers that the server responded with 
    headers: {}, 

    // `config` is the config that was provided to `axios` for the request 
    config: {} 
} 

So ist die catch(error =>) ist eigentlich nur catch(response =>)

EDIT:

ich immer noch nicht verstehen, warum die Fehler erneut anmelden, die Nachricht zu stapeln. Ich habe versucht, es so zu protokollieren. Und dann können Sie tatsächlich sehen, dass es ein Objekt ist.

console.log('errorType', typeof error); 
console.log('error', Object.assign({}, error)); 

EDIT2:

Nach etwas mehr umsah this ist, was Sie versuchen, zu drucken. Welches ist ein Javascipt-Fehlerobjekt? Axios erhöht dann diesen Fehler mit der Konfiguration, dem Code und der Antwort wie this.

console.log('error', error); 
console.log('errorType', typeof error); 
console.log('error', Object.assign({}, error)); 
console.log('getOwnPropertyNames', Object.getOwnPropertyNames(error)); 
console.log('stackProperty', Object.getOwnPropertyDescriptor(error, 'stack')); 
console.log('messageProperty', Object.getOwnPropertyDescriptor(error, 'message')); 
console.log('stackEnumerable', error.propertyIsEnumerable('stack')); 
console.log('messageEnumerable', error.propertyIsEnumerable('message')); 

Answer 2

Ich war auch auf dieser für eine Weile ratlos. Ich werde die Dinge nicht zu viel aufrühren, aber ich dachte, es wäre hilfreich für andere, meine 2 Cent hinzuzufügen.

Die error im obigen Code ist vom Typ Error. Was passiert, ist die toString Methode wird auf das Fehlerobjekt aufgerufen, weil Sie versuchen, etwas auf der Konsole zu drucken. Dies ist implizit, ein Ergebnis des Schreibens in die Konsole. Wenn Sie den Code von toString für das Fehlerobjekt betrachten.

Sie können oben sehen, dass es die Interna verwendet, um die Zeichenfolge zu erstellen, die an die Konsole ausgegeben wird.

Es gibt große docs auf diesem auf mozilla.

Answer 3

können Sie inline verwenden, wenn else-Anweisung wie folgt:

.catch(error => { 
    dispatch({ 
     type: authActions.AUTH_PROCESS_ERROR, 
     error: error.response ? error.response.data.code.toString() : 'Something went wrong, please try again.' 
    }); 
}); 

Answer 4

Beispiel

getUserList() { 
    return axios.get('/users') 
     .then(response => response.data) 
     .catch(error => { 
     if (error.response) { 
      console.log(error.response); 
     } 
     }); 
    } 

für die Antwort das Fehlerobjekt prüfen, wird es das Objekt enthalten, die Sie suchen, so können Sie tun error.response.status

https://github.com/mzabriskie/axios#handling-errors