web-dev-qa-db-ger.com

Wie kann ich die Fehlerantwort 422 mit Redux/Axios abfangen und behandeln?

Ich habe eine Aktion, die eine POST-Anforderung an den Server sendet, um das Kennwort eines Benutzers zu aktualisieren, aber ich kann den Fehler im verketteten catch-Block nicht behandeln.

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 protokolliere, sehe ich Folgendes:

 Error Logged

Wenn ich die Netzwerkregisterkarte überprüfe, kann ich den Antworttext sehen, aber aus irgendeinem Grund kann ich nicht auf die Werte zugreifen!

 Network Tab

Habe ich irgendwo unwissentlich einen Fehler gemacht? Ich gehe zwar mit anderen Fehlern aus anderen Anforderungen zurecht, kann dies aber nicht klären.

javascriptreactjsreduxaxios
35
Phillip Boateng

Axios analysiert wahrscheinlich die Antwort. Ich greife auf den Fehler in meinem Code zu:

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 den Dokumenten:

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: {}
}

Die catch(error => ) ist also eigentlich nur catch(response => )

BEARBEITEN:

Ich verstehe immer noch nicht, warum die Protokollierung des Fehlers diese Stapelnachricht zurückgibt. Ich habe versucht, es so zu protokollieren. Und dann kann man tatsächlich sehen, dass es ein Objekt ist.

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

EDIT2:

Nachdem Sie sich noch ein wenig umgesehen haben dies ist das, was Sie zu drucken versuchen. Welches ist ein Javascipt-Fehlerobjekt. Axios verbessert diesen Fehler dann 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'));
29
Jeroen Wienk

Beispiel

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

Überprüfen Sie das Fehlerobjekt auf Antwort. Es enthält das Objekt, nach dem Sie suchen, damit Sie error.response.status ausführen können.

 enter image description here

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

26
Steven Leggett

Hier ist der richtige Weg, um das Objekt error zu behandeln:

axios.put(this.apiBaseEndpoint + '/' + id, input)
.then((response) => {
    // Success
})
.catch((error) => {
    // Error
    if (error.response) {
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        // console.log(error.response.data);
        // console.log(error.response.status);
        // console.log(error.response.headers);
    } else if (error.request) {
        // The request was made but no response was received
        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
        // http.ClientRequest in node.js
        console.log(error.request);
    } else {
        // Something happened in setting up the request that triggered an Error
        console.log('Error', error.message);
    }
    console.log(error.config);
});

Ursprüngliche URL https://Gist.github.com/fgilio/230ccd514e9381fafa51608fcf13725

6
Supervision

Ich war auch eine Weile über diese Sache verblüfft. Ich werde die Dinge nicht zu viel aufkühlen, aber ich dachte, es wäre für andere hilfreich, meine 2 Cents hinzuzufügen.

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

Error.prototype.toString = function() {
  'use strict';

  var obj = Object(this);
  if (obj !== this) {
    throw new TypeError();
  }

  var name = this.name;
  name = (name === undefined) ? 'Error' : String(name);

  var msg = this.message;
  msg = (msg === undefined) ? '' : String(msg);

  if (name === '') {
    return msg;
  }
  if (msg === '') {
    return name;
  }

  return name + ': ' + msg;
};

Sie können also oben sehen, dass der interne String verwendet wird, um die Zeichenfolge für die Ausgabe an die Konsole aufzubauen. 

Zu Mozilla gibt es tolle Docs . 

2
Ryan-Neal Mes

Sie können die Inline-If-Anweisung wie folgt verwenden:

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