Axios: Axios catch error gibt Javascript-Fehler zurück, keine Serverantwort

Erstellt am 17. Juni 2017  ·  87Kommentare  ·  Quelle: axios/axios

Ich versuche, Validierungsfehler vom Server abzufangen.

Code:

axios.post('/formulas/create', {
       name: "",
       parts: ""
})
.then( 
    (response) => { console.log(response) },
    (error) => { console.log(error) }
);

Protokollausgabe der Konsole

Error: Request failed with status code 422
    at createError (app.js:6765)
    at settle (app.js:29489)
    at XMLHttpRequest.handleLoad (app.js:6600)

Ausgabe der Registerkarte Netzwerk
{"name":["Das Namensfeld wird benötigt."],"parts":["Das Teilefeld wird benötigt."]}

Ich sollte ein Objekt sehen, das eine JSON-Formularvalidierung enthält, da dies die Antwort in meiner Netzwerkregisterkarte ist. Ich scheine die JS-Catch-Ausgabe zu erhalten?

Habe auch folgendes probiert:

axios.post('/formulas/create', {
    name: "",
    parts: ""
})
.then(response => { 
    console.log(response)
})
.catch(error => {
    console.log(error)
});

Gleiches Ergebnis

Mehr Leute scheinen das gleiche Problem mit der gleichen Umgebung wie ich hier zu haben.
https://laracasts.com/discuss/channels/vue/issues-with-axios-catch-method

  • Axios-Version: ^0.16.2
  • VueJS 2.3.4
  • Vue-Vorlagen-Compiler 2.3.4
  • Laravel-Mix
  • Umgebung: Knoten v6.4.0, Chrome 58, Mac OSX 10.12.4

Hilfreichster Kommentar

Ich habe genau die gleiche Umgebung. Versuche dies:

axios.post('/formulas/create', {
    name: "",
    parts: ""
})
.then(response => { 
    console.log(response)
})
.catch(error => {
    console.log(error.response)
});

Ändern Sie von console.log(error) zu console.log(error.response) in catch .

Sie können auch einen globalen Interceptor verwenden und nur error.response ablehnen. Das Problem besteht darin, dass, wenn console.log versucht, den Fehler auszugeben, die Zeichenfolgendarstellung gedruckt wird, nicht die Objektstruktur, sodass Sie die Eigenschaft .response nicht sehen.

Alle 87 Kommentare

Ich habe genau die gleiche Umgebung. Versuche dies:

axios.post('/formulas/create', {
    name: "",
    parts: ""
})
.then(response => { 
    console.log(response)
})
.catch(error => {
    console.log(error.response)
});

Ändern Sie von console.log(error) zu console.log(error.response) in catch .

Sie können auch einen globalen Interceptor verwenden und nur error.response ablehnen. Das Problem besteht darin, dass, wenn console.log versucht, den Fehler auszugeben, die Zeichenfolgendarstellung gedruckt wird, nicht die Objektstruktur, sodass Sie die Eigenschaft .response nicht sehen.

Falls sich jemand fragt, wie nur die Eigenschaft response abgelehnt werden kann, gehen Sie wie folgt vor:

axios.interceptors.response.use((response) => {
    return response;
}, function (error) {
    // Do something with response error
    if (error.response.status === 401) {
        console.log('unauthorized, logging out ...');
        auth.logout();
        router.replace('/auth/login');
    }
    return Promise.reject(error.response);
});

Der wichtige Teil ist return Promise.reject(error.response);

Dies führt zum gleichen Ergebnis, falls die obige Lösung Ihre JS-Dateisyntax beim Einrücken oder Verkleinern durcheinander bringt :)

.post('ajax/register/otp', this.registerData)
.then(function (response) {
       return otpSent(response)
})
.catch(function (error) {
      console.log(error.response);
 });

@gopal-g das ist für mich undefiniert.

Nun, @pedro-mass, in diesem Fall gibt es möglicherweise keine Antwort von der Serverseite. In meinem Szenario war meine Antwort JSON, als ein Fehler auftrat, konnte ich die Antwort mit error.response

@gopal-g Wenn ich die Registerkarte "Netzwerk" in den Entwicklungstools beobachte, kann ich die Antwort sehen. Es ist ein 401, wenn das einen Unterschied macht.

Ich habe den gleichen Fehler mit @pedro-mass 's.

hier ist mein Code

async function test () {
try {
  let res = await axios.get('/xxxxx/xxxx')

} catch (e) {
  console.log(e.response) // undefined
}
}

Die Verwendung von "error.response" funktioniert bei mir nicht. Das Problem tritt auf, wenn ich den Datenbankserver getrennt habe und mein Webserver den Fehler 500 zurückgegeben hat.

Registerkarte "Netzwerk" in den Entwicklungstools

Antwortcode: 500
Antworttext:

{
  "error": {
    "statusCode": 500,
    "name": "Error",
    "message": "read ETIMEDOUT",
    "code": "ETIMEDOUT",
    "errno": "ETIMEDOUT",
    "syscall": "read",
    "stack": "Error: read ETIMEDOUT\n    at exports._errnoException (util.js:1050:11)\n    at TCP.onread (net.js:582:26)"
  }
}

Chrome-Konsolenfehler:

Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:15)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

Ausführung

"axios": "^0.15.3"

Es gibt einen Haken in catch : Wenn der Fehler auftritt, bevor die Anfrage gestellt wird, dann haben Sie in catch nicht die Eigenschaft err.response , weil... nun ja.. .keine Reaktion. Das catch fängt also jeden Fehler ab. Gleiches gilt in Situationen wie der von @fabiorecife, wenn aufgrund eines Netzwerkausfalls keine Antwort erfolgt . Behandeln Sie err als HTTP-Fehler, da dies nicht immer der Fall ist.

@alsofronie also, was ist die bevorzugte Methode zur Behandlung (Unterscheidung von anderen), zum Beispiel Preflight-Fehlern wie 413?

Ich habe ein ähnliches Problem - Chrome devtools zeigt 401 , die Antwort ist {"message":"Identity token has expired"} und ich bin catch( (error) => {...}) - aber error.response leer. Ich frage mich, ob dies daran liegt, dass der vorherige OPTIONS Aufruf, der mit GET verknüpft ist, den Status 200 . Was ist in diesem Fall zu tun und wo ist der richtige Ort, um den 401 Statuscode abzurufen?

@robbiemu Ich denke, es ist bereits dokumentiert: https://github.com/axios/axios#handling -errors

@mrchief danke dafür, gut, es noch einmal error.response vorhanden ist, aber Felder sind undefined , alle Aufrufe von Werten innerhalb von response Objekt führt zu einem Fehler.

@paolavness Ich würde vorschlagen, ein neues Problem zu eröffnen, anstatt hier zu kommentieren. Nicht viele sehen geschlossene Ausgaben. Oder fragen Sie es vielleicht sogar auf StackOverflow.

@mrchief Ah, das ist geschlossen, danke für den Hinweis. Wird besorgt.

Ich hatte das gleiche Problem. Letztendlich habe ich den Fehlercode von 401 auf 403 geändert und alles hat wie erwartet funktioniert. Ich vermute, der Grund für das leere Fehlerobjekt und den resultierenden Javascript-Fehler hat mit dieser Aussage zu tun, die ich in der Dokumentation für 401-Fehler gefunden habe:

"[A 401 error]-Antwort muss ein WWW-Authenticate-Header-Feld enthalten, das eine Abfrage enthält, die auf die angeforderte Ressource anwendbar ist."

Wenn Sie also einen 401-Fehler verwenden, müssen Sie ein WWW-Authentifizierungs-Header-Feld einfügen. Wenn Sie dies nicht möchten, verwenden Sie einfach einen 403-Fehler.

Guten Morgen Leute, ich hatte dieses Problem, aber ich habe es behoben, indem ich meine Apache-Konfiguration geändert habe, um Cors auf meinem Server zu aktivieren. Schau dir den Link unten an

https://enable-cors.org/server_apache.html

Sie können alle Antworten nur mit console.log(JSON.stringify(error)) debuggen

axios.post(url)
.dann((Antwort) => {
// etwas
})
.catch((Antwort) => {
if (response.status == undefiniert) {
alert('nicht autorisiert')
}
})

Ich hatte genau das gleiche Problem wie von @fabiorecife beschrieben . Ich habe es gelöst, aber es ist nicht die eleganteste Lösung und ich verstehe nicht, warum dies erforderlich ist.

.catch(error=>{
let errorObject=JSON.parse(JSON.stringify(error));
console.log(errorObject);
dispatch(authError(errorObject.response.data.error));
})

Dies führt zu den erwarteten Ergebnissen in der Variablen errorObject .

@petruscurtu Ich habe das gleiche Problem! Bei mir funktioniert es nicht!
image
Ich weiß nicht, warum es 'no Access-control-allow-origin' ausgibt, aber der Server hat es eingestellt! Der Antwortheader ist in Ordnung

image

Behoben. Die Authentifizierungs-API hat nicht auf den richtigen Header geantwortet, der den Access-control-allow-origin haben muss

@luxueyan Ich weiß nicht, was das Problem sein könnte, da ich nicht weiß, wie Sie CORS auf Ihrem Server handhaben. Was Axios betrifft, kann ich in Ihrer Konsolenausgabe ein Konfigurations- und Anforderungsobjekt sehen. Ich denke, dass Sie diese Ausgabe überprüfen sollten. Dies kann mit dem Format der Antwort zusammenhängen, die Ihr Server zurücksendet.

@luxueyan Es scheint, dass Sie Ihr Access-control-allow-origin für http://localhost:8081 (vorausgesetzt, dies ist auf dem Server mit dieser Adresse http://10.31.143.32:8080 ?) Können Sie überprüfen, welche URL Sie haben? führst du dieses Projekt aus? Ist es http://localhost:8081 ? Ist dies nicht der Fall, verstößt dies auch bei einer anderen Portnummer gegen die CORS-Domänenregeln.

@petruscurtu Die Ausgabe ist 'JSON.parse(JSON.stringify(error))' im Interceptor der Antwort. Es gibt keine Antworteigenschaft

@chiefie Ich bin mir sicher, dass die Einstellung 'Access-control-allow-origin' in Ordnung ist, da andere Ajax-APIs auf den richtigen Inhalt antworten können Holen Sie sich den Antworttext

Aktualisieren! Es war der Server-API-Fehler, er hatte keine Cors-Einstellungen im Header. Jetzt gut arbeiten.

Danke @juliano-barros es lag an der Cross-Herkunft. Jetzt funktionieren alle meine Ajax-Anfragen einwandfrei.

Dieser unformatierte Fehler wird immer dann ausgegeben, wenn der Server nicht erreichbar ist/CORS ungültig gemacht wurde.
error.response wird nur undefined .

Ich habe gerade einen IntegrationError erstellt, der Nachrichten-, Status- und Antwortdaten enthält ... aber immer der gleichen Struktur folgt. Auf diese Weise kann ich Axios/Rohfehler von meinen Handhabungen entkoppeln.

Axios Leute, das sollte ein HTTP-Fehler sein, denke ich ... einschließlich eines error.response .
Dies kann wie oben überprüft werden

Gestern war das einjährige Jubiläum dieser Ausgabe. Wird es jemals "behoben" oder wird es zu diesem Zeitpunkt als "kein Problem" angesehen?

@frostshoxx Ich denke, dies ist ein "Nicht-Problem". Obwohl ich das gleiche Problem habe wie alle anderen, verstehe ich jetzt, was passiert und kann sehen, dass dies kein Fehler oder Problem ist, sondern einfach so, wie die Welt funktioniert.

Für alle, die verwirrt sind (und zur Feier dieses Problems, das ein Jahr alt wird) möchte ich erklären, was passiert und wie Sie Ihre Serverantwort erhalten.

Wie sind Sie hier gelandet?

Es gibt viele Gründe, warum Sie auf das Ödland von .catch() stoßen könnten. Manchmal stößt Axios schon früh in der Anfrage auf einen Fehler. Dies geschieht manchmal bei CORS-Anfragen. Wenn Axios OPTIONS nicht verfügbar ist, gerät Axios in Panik und schickt Sie zu .catch() bevor es tatsächlich eine Antwort vom Server erhält, sodass die Antwort in diesen Fällen nicht verfügbar ist.

Einige von Ihnen sagen vielleicht: "Nein, ich sehe es in DevTools, also kam die Antwort zurück!". Dies ist nicht immer der Fall, da Axios manchmal eine HTTP-Anfrage startet, einen Fehler erfährt, sich selbst abbricht und Sie zu .catch() schickt, bevor der Server zurückantwortet. Einige Millisekunden nachdem Axios die .catch() Funktion ausgeführt hat, wird Ihr Server möglicherweise mit einer Antwort zurückkommen, die in DevTools angezeigt wird, da er immer noch auf die Antwort wartet. Allerdings ist Axios zu diesem Zeitpunkt schon lange fertig, daher war response nicht verfügbar, da es zu dem Zeitpunkt, als Axios die Funktion .catch() initiierte, noch nicht existierte.

Diejenigen von euch, die eine Nachricht über einen 4XX- oder 5XX- Fehler vom Server erhalten, haben Glück! Normalerweise steht Ihnen eine Antwort vom Server zur Verfügung, denn um diesen Fehler zu erhalten, musste Axios auf die vollständige Serverantwort warten. In diesen Fällen schickt Axios Sie mit response zu .catch() , verpackt die Antwort jedoch in ein eigenes error Objekt, das im laufenden Betrieb erstellt wird.
Wenn Sie also 5XX- oder 4XX- Fehler erhalten, steht Ihnen wahrscheinlich die Serverantwort zur Verfügung, aber sie ist TIEF vergraben!

Versuchen Sie es mit error.response.data.data.message . Es wurde bestätigt, dass dies für Laravel-API-Anforderungen funktioniert, die Serverfehler zurückgeben.

Nicht-Laravel-Benutzer – Sie müssen mindestens error.response.data , um die Kernantwort des Servers zu erhalten, aber die meisten Server packen ihre Antworten dann in ein weiteres data{} Objekt ein, das Sie dazu zwingt, a Schicht tiefer, und greifen Sie dann schließlich auf die gewünschte Antworteigenschaft wie .message von dort aus zu.

Aber ich habe Console.Log gemacht und es enthält keine Antwort!

Ja, ich weiß, aber versuchen Sie trotzdem, error.response.data auszugeben, nur um mich zu amüsieren.

Aus irgendeinem Grund ändert Axios die Ausgabe von console.log(error) für das Fehlerobjekt. Ich bin mir nicht sicher, warum sie dies tun, aber wenn Sie stattdessen console.log(JSON.stringify(error)) schreiben, sehen Sie das gesamte Objekt in seiner ganzen Pracht.

Dies ist serialisiertes JSON, das nach etwa 2 Ebenen schwer zu lesen ist. Sie sollten also das gesamte Ding kopieren und in einen JSON-Prettifyer einfügen , um die Struktur des


Wenn Sie in Axios einen Fehler vom Typ 500 oder einen Fehler vom Typ 400 (oder wirklich einen vom Server bereitgestellten Fehlercode) erhalten, bedeutet dies, dass die Anfrage abgeschlossen ist und Ihnen die Antwort des Servers zur Verfügung steht!

Das Problem ist, dass es sehr tief ist, und weil Axios die Ausgabe unseres console.log(error) modifiziert, die die meisten Leute tun, um das error{} Objekt zu sehen, wissen die meisten Leute nicht, dass es existiert. Aber es ist da!

@VSG24 Mann!! Das ist eine lebensrettende Antwort :D

fwiw, JSON.stringify(error) Bomben in 0.18.0 aufgrund von Zirkelverweisen.

Ich habe einen Interceptor eingerichtet, der mir bei einem Fehler eine Serverantwort gibt

axios.interceptors.response.use(
  response => {
    // do someting on response
    return response
  },
  error => {
    // do someting on errir
    return Promise.reject(error.response.data) // => gives me the server resonse
  }
)
    try {
      const { data } = await htttp.post(login, payload)
      // do someting with data
    } catch (e) {
      console.log(e) // server response data
    }

@alimirayman Es scheint gut zu funktionieren, wenn wir nicht jede Anfrage im Auge behalten müssen. Wenn Sie jedoch jede Anfrage verfolgen müssen, ist es nicht sinnvoll, einen Fehlerhandler an jeder Stelle in meinem Code zu wiederholen. Sofern ich es nicht falsch verstanden habe (was kann der Fall sein), sollte axios nicht sicherstellen müssen, dass der Server einen Fehler zurückgegeben hat, bevor er einen Fehler ausgibt?

@hhowe29 benutze circular-json

Ich habe diesen Thread wie viele andere gefunden und verwende axios mit vue.js- und vuex-Modulen.

Meine vuex-Modulaktion fängt den Axios-Fehler ab und führt commit(ERROR_HAPPENED, error) aus, um die ERROR_HAPPENED-Mutation des vuex-Moduls auszuführen. Aber der Fehler kommt ohne seine Antworteigenschaft an, was dazu führt, dass error.response undefiniert ist, wenn ich versuche, die Antwort auf einen vuex-Zustand zu setzen.

Wenn ich console.log(error.response) in der Aktion vor dem Commit() verwende, kann ich die Antwort sehen. Es wird also höchstwahrscheinlich von vuex verstümmelt.

Entweder Commit (ERROR_HAPPENED, error.response.data) oder prüfen, ob es sich um eine 401 in der Aktion handelt und je nach Statuscode einen anderen Commit ausführen. Denn diese Verstümmelung geschieht nur mit einem 401-Code. Andere Fehler wie 404 oder 500 werden an meine Mutationen weitergegeben.

Nicht verstümmelt. Vuex verstümmelt dies nicht, auch nicht durch Fehler.
Einige Arten von Fehlern, meist innerhalb von Axios-Abfangjägern, führen dazu, dass dies nicht aufgedeckt wird.

Irgendein Update?

@AllanPinheiroDeLima Entschuldigung für die späte Antwort, aber ich glaube nicht, dass jemand Abfangjäger an jeder einzelnen Stelle des Codes von jemandem schreibt. Wir schreiben Intercepter einmal auf einer Codebasis und verwenden es als Hilfsklasse, das ist Nummer 1. Nummer 2, die anfängliche Abfrage war, dass sie keine _Serverfehlerantwort_ erhalten haben, stattdessen den _Javascript-Fehler_ im try catch -Block. Es gab 2 Lösungen, um die Art und Weise zu ändern, wie der Server auf Fehler reagierte oder die Art und Weise, wie das Frontend Fehler abfängt. axios error Intercepter fungiert im Grunde als Middleware, um dieses Problem zu lösen, wenn Sie Ihre Codemethoden oder eine große Codebasis nicht ändern möchten.

Ja ich stimme zu. Ich habe eine Lösung für dieses Problem gefunden, indem ich die Integration in meinen eigenen Server anstelle von Raw Keycloak gemacht habe. Auf diese Weise konnte ich den Fehler im Server abfangen und dann einen lesbaren an das Frontend senden. Ich denke, das ist die einzige Möglichkeit, dieses Problem im Moment zu lösen :)

Ich habe das gleiche Problem noch. Mit in Axios Interceptor console.log('interceptors', JSON.stringify(error)) bekomme ich dieses Protokoll interceptors {"config":{"transformRequest":{},"transformResponse":{},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"},"method":"post","url":"http://localhost:5000/api/autenticacao/login","data":"{\"siglaInstituicao\":\"NEAS\",\"usuario\":\"emersoncpaz\",\"senha\":\"belle1903\"}"},"request":{}} aber Chrome Devtools Antwort Ich habe die richtige Antwort von der API: A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: Named Pipes Provider, error: 40 - Could not open a connection to SQL Server) Wie bekomme ich diese Antwort von Axios?

Gibt es einen Grund, warum 5xx-Fehler nicht vom catch-Block behandelt werden (kein Antwortobjekt zurückgeben)? Der Statuscode 502 wird in der DevTool-Konsole angezeigt, wird jedoch nicht von Axios verarbeitet.

Das hat bei mir funktioniert (mit laravel abort helper: abort(500, 'message'))
```
.catch(Fehler => {
console.log(error.response.data.message);
});

```

Hat jemand ein voll funktionsfähiges Beispiel außer einem Codeausschnitt, der besagt, dass dies funktioniert hat? Ein Ausschnitt von 1 Zeile hilft nicht viel, wenn Sie keine Ahnung haben, auf wen sie sich in diesem Thread bezogen haben, wo sie diesen Codeausschnitt abgelegt haben, wie der endgültige Arbeitscode aussieht?

Ich versuche den Fehler im Inerceptor abzufangen und beende die Anfrage basierend auf dem Fehlercode entweder dort mit Umleitung, wenn 401 zum Anmelden, oder wenn es 422 ist, lasse die Anfrage an die aufrufende Komponente zurück, um die Aktualisierung der Formularfehler zu ermöglichen.

Irgendwelche Ideen?

Ich verwende Nuxt Axios und mein onResponseError-Interceptor sieht so aus:

$axios.onResponseError(error => {
    const code = parseInt(error.response && error.response.status)
    console.log(code, 'Axios onResponseError')
    console.log(error.response.status, 'status')
    console.log(error.config, 'config')
    console.log(error.response, 'response')
    // Do something with response error
    if (error.response.status === 401) {
      console.log('unauthorized, logging out ...')
      app.$auth.logout()
      redirect('/login')
    }
    if (code === 400) {
      // redirect('/400')
      console.log(`400 onResponseError`)
    }
    if (code === 408) {
      console.log(`A timeout happened on url onResponseError`)
    }
    if (code === 418) {
      console.log(`A teapot onResponseError`)
    }
    if (code === 428) {
      console.log(`428 onResponseError`)
      // redirect('/login')
    }
    return Promise.reject(error)
  })

Und ein Beispielaufruf würde so aussehen:

async postRecord (clear = false) {
      try {
        const { r } = await this.$axios.$post(this.endPoint, this.formData)
        console.log(r, 'response')
        // do something with response
      } catch (e) {
        console.log(e, 'error in crud') // server response data
        // i should never get here if error since the interceptor should kill the request if 401
       // for testing this request is returning a 401
      } finally {
        this.submitted = false
      }
    },

Danke,
Dave

Wenn kein Internet verfügbar ist, ist die error.response undefiniert - ist dies der beste Weg?

Ich erhalte einen Fehler im Klartext, ich musste Folgendes verwenden, um Fehler in einem Objekt zu konvertieren.

var errorObj = JSON.parse(JSON.stringify(error));

Dies liegt am Server und nicht an Axios. Haben Sie versucht, in die
error.response.status, wenn es nicht definiert ist, wissen Sie, dass es ein Internet ist
Verbindungsproblem oder ein Syntaxfehler in Ihrem JS

Am Mi, 2 Jan 2019, 15:40 Ibrahim Azhar Armar < [email protected]
schrieb:

Ich erhalte einen Fehler im Klartext, ich musste Folgendes verwenden, um den Fehler in umzuwandeln
ein Objekt.

var errorObj = JSON.parse(JSON.stringify(error));


Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/axios/axios/issues/960#issuecomment-450896476 oder stumm
der Faden
https://github.com/notifications/unsubscribe-auth/AEETt2r3bt2QCixDlzh4fZvWp_1rPkxuks5u_NMEgaJpZM4N9Ljl
.

@kgrosvenor Ich versetze das Serverskript in den Ruhezustand und warte, bis Axios eine Zeitüberschreitung auslöst. Ich glaube, dass der Server zu diesem Zeitpunkt nicht antwortet und daher den Rückruf in Axios auslöst.

Ich erhalte die richtige Fehlermeldung, aber die Konsole zeigt sie im Klartext an, daher scheint es nur das Formatierungsproblem zu sein, das nicht mit dem Server zusammenhängt.

Wenn ja, versuche ich zu verstehen, was im Server dies verursachen könnte?

Sie treffen dann höchstwahrscheinlich auf eine Zeitüberschreitung, versuchen Sie zu überprüfen, ob im Fehler eine 'Antwort' vorhanden ist

axios.get()
.then(function(done) {
   //fine and can get done.data
})
.catch(function(err) {
  //catch the error, check it has a response object with lodash 
  if(_.has(err, 'response') {
     console.log(error.response.status);  
     console.log(error.response.data);
 } 
 else {
    console.log("Most likely a server timeout or an internet connection error");
    console.log("error response property is undefined")
 }
}); 

Der Java-Programmierer sendet mir eine Fehlermeldung mit dem Fehler 500 und ich kann diese Nachricht nicht verarbeiten. Also bitte ich ihn, den 200-Status mit einer Fehlermeldung als Antwort zurückzugeben, aber er ist wütend auf mich und sagt, dass sein HTTP-Client alle Nachrichten mit dem 500-Status sieht. Er denkt, dass ich dumm bin, weil ich die Fehlermeldung mit 500-Status nicht finden kann. Wie erkläre ich ihm, dass axios die Fehlermeldung 500 nicht verarbeitet?

Der Java-Programmierer sendet mir eine Fehlermeldung mit dem Fehler 500 und ich kann diese Nachricht nicht verarbeiten. Also bitte ich ihn, den 200-Status mit einer Fehlermeldung als Antwort zurückzugeben, aber er ist wütend auf mich und sagt, dass sein HTTP-Client alle Nachrichten mit dem 500-Status sieht. Er denkt, dass ich dumm bin, weil ich die Fehlermeldung mit 500-Status nicht finden kann. Wie erkläre ich ihm, dass axios die Fehlermeldung 500 nicht verarbeitet?

Eigentlich müssen Sie in der Lage sein, Fehler mit Status 500 zu behandeln, Sie können als Antwort den http-Status überprüfen und entscheiden, wie er auf der Client-Seite behandelt wird. Dies ist bereits in diesem Link dokumentiert (https://github.com/axios/axios#handling-errors)

So fange ich Fehler 500 vom Server ab und es funktioniert für mich.

.catch(function (error) {
    var errorObj = JSON.parse(JSON.stringify(error));
    console.log(errorObj);
    if (errorObj.code == 'ECONNABORTED') {
        alert('Connection timed out.');
    }
});

Sie können den 500-Status trotzdem verarbeiten, aber meiner Meinung nach eine ziemlich schlechte Praxis, ihn absichtlich von der Serverseite zurückzugeben ...

Ich erhalte auch error.response undefined, dann versuche ich den folgenden Code.

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  // Do something with response error
  let {response} = error;
  // response?.status === 401 es7 way.
  if (response && response.status === 401) {
    // Do logout;
    // Redirect to login;
    return Promise.reject(error.response);
  } 
  else if (error.response){
    // Do something.
    console.log('some API_CLIENT error');
    return Promise.reject(error.response);
  }
 return Promise.reject(error);
});

Das ist schade, Fehlerbehandlung ist wichtig.

Wie geht es jetzt? Ich habe immer noch das gleiche Problem mit Version 0.18.0!

gleiches Problem bei mir: @nuxtjs/axios v5.0.0

Es ist ein Fehler

Daniel Stern [email protected]于 2019年2月28日周四 04:39写道:

Lassen Sie mich diese Diskussion zusammenfassen.

tl;dr:
JEDER Es ist ein Problem, HTTP-Fehler nicht
ENTWICKLER HTTP-Fehler nicht erkennen zu können, ist kein Problem.


Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/axios/axios/issues/960#issuecomment-468020991 oder stumm
der Faden
https://github.com/notifications/unsubscribe-auth/AAN8CbMHohyuSZHYlcieD_5yUqizpkSYks5vRuzygaJpZM4N9Ljl
.

Sie müssen dieses Problem bitte in der README erwähnen, sehr hilfreich. Danke!

https://github.com/axios/axios/issues/960#issuecomment -320659373

In Übereinstimmung mit anderen Postern. Ein Objekt mit unvorhersehbarer Struktur an catch je nachdem, wo der Fehler auftritt, ist nicht großartig. Sowohl error.response als auch JSON.stringify(error) können je nach Ursache selbst Fehler verursachen. Auch der vorgeschlagene Ansatz unter https://github.com/axios/axios#handling -errors ist in dieser Hinsicht nicht gerade aufschlussreich.

All diese Akrobatik machen zu müssen, um eine verdammte Fehlermeldung zurückzugeben, ist 2019 peinlich. 1990 wäre es peinlich gewesen. Lernen Sie API-Design kennen und erkennen Sie, dass Ihre „kreativen Entscheidungen“ Tausende von Menschen unzählige Stunden gekostet haben, um ein Durcheinander zu beheben, das Sie absichtlich ignorieren.

Für diejenigen, die mit den Zirkelverweisen zu kämpfen haben, können Sie Folgendes tun:

try {
// your axios request
} catch (error) {
  const { response } = error;
  const { request, ...errorObject } = response; // take everything but 'request'
  res.status(response.status);
  return res.json(errorObject); // or use 'return res.json(response.data.error);' then you don't need to omit the 'request'
}

Für diejenigen, die mit den Zirkelverweisen zu kämpfen haben, können Sie Folgendes tun:

try {
// your axios request
} catch (error) {
  const { response } = error;
  const { request, ...errorObject } = response; // take everything but 'request'
  res.status(response.status);
  return res.json(errorObject); // or use 'return res.json(response.data.error);' then you don't need to omit the 'request'
}

Danke, Kerl! der Code hat bei mir gut funktioniert.

Das Problem liegt bei "lib/core/enhanceError". Das Anforderungsobjekt wird dem Fehler hinzugefügt. Es ist sinnvoll, der Antwort eine Antwort hinzuzufügen, da es in Promise-basierten APIs nur einen Parameter gibt (die Anforderungsbibliothek gibt als ersten Parameter einen Fehler und als zweiten eine Antwort zurück). Aber es macht keinen Sinn, alle Anfragen hinzuzufügen. Codeänderung ist sehr einfach https://github.com/geoblink/axios/pull/1/files
Ich könnte pr für den Hauptzweig öffnen, wenn es wichtig erscheint (ich mache es nicht, da das Problem geschlossen ist)

Sie können einen Funktionswrapper erstellen, den Sie jedes Mal aufrufen, wenn Sie Anfragen stellen

const api = async (uri, data) => {
  try {
    const { data: response } = await axios({
      url: domain + uri,
      method: 'POST',
      data,
    });

    return response.data;
  } catch (error) {
    throw error.response.data;
  }
};

Sie treffen dann höchstwahrscheinlich auf eine Zeitüberschreitung, versuchen Sie zu überprüfen, ob im Fehler eine 'Antwort' vorhanden ist

axios.get()
.then(function(done) {
   //fine and can get done.data
})
.catch(function(err) {
  //catch the error, check it has a response object with lodash 
  if(_.has(err, 'response') {
     console.log(error.response.status);  
     console.log(error.response.data);
 } 
 else {
    console.log("Most likely a server timeout or an internet connection error");
    console.log("error response property is undefined")
 }
}); 

Das funktioniert bei mir. Danke schön

Die Verwendung von "error.response" funktioniert bei mir nicht. Das Problem tritt auf, wenn ich den Datenbankserver getrennt habe und mein Webserver den Fehler 500 zurückgegeben hat.

Registerkarte "Netzwerk" in den Entwicklungstools

Antwortcode: 500
Antworttext:

{
  "error": {
    "statusCode": 500,
    "name": "Error",
    "message": "read ETIMEDOUT",
    "code": "ETIMEDOUT",
    "errno": "ETIMEDOUT",
    "syscall": "read",
    "stack": "Error: read ETIMEDOUT\n    at exports._errnoException (util.js:1050:11)\n    at TCP.onread (net.js:582:26)"
  }
}

Chrome-Konsolenfehler:

Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:15)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

Ausführung

"axios": "^0.15.3"

ICH AUCH...

Durch meine Erfahrung:

"Ändere von console.log(error) zu console.log(error.response) in catch."

funktionierte besser mit console.log(error.response.data) in catch.

axios.interceptors.response.use(null, error => {
Fehler.Antwort zurückgeben;
});

getClients: async (Zustand) => {
const res = wait axios.get( ${BASE_API}/clients );
console.log('res',res);
wenn (res) {
state.commit("setClient", res.data);
}
}

Andere Option

/**
 * Whenever error.message is accessed we want to se the full API error message (JSON) if it's present
 * not just some generic http status code + message
 * see https://github.com/axios/axios/issues/960 for context
 *
 * <strong i="6">@param</strong> axios
 */
export function extractAPIErrorResponse(axios: AxiosInstance) {
    axios.interceptors.response.use(undefined, function (error: AxiosError) {
        (error as any).originalMessage = error.message;
        Object.defineProperty(error, "message", { get: function () {
            if (!error.response) {
                return (error as any).originalMessage;
            }
            return JSON.stringify(error.response.data);
        }});
        return Promise.reject(error);
    })
}

Versuchen{
Warte das.$axios .....
}fangen(e)
{
Konsole.log(e)

}

axios.get("https://......") 
     .then( response => {
          return response
}).catch( () => {
         store.dispatch("errorComponentMethod")   // if there's an error, method is dispatched
})
//////////////////////////////////////
actions : {
      errorComponentMethod(){
              router.push("/errorComponent")     // method routes to error component
      }
}

Vielen Dank ! Hat sehr geholfen!

bekomme immer noch dieses Problem. Beim Chrome-Debugger ist die Antwort korrekt, aber Axios gibt stattdessen ein allgemeines "Request failed with status code 403"

Ich habe das immer noch und bin wirklich verwirrt. Ich habe versucht, es in den obigen Kommentaren abzufangen - aber warum genau gibt Axios undefiniert zurück, wenn ein Fehler auftritt?
try{ const res = await axios.get("someurl"); return res; } catch(e) { console.log(e); }
res ist undefiniert, obwohl der Server eine Antwort mit einer Nachricht zurücksendet, WARUM es nicht funktioniert hat. Und ich komme nicht an diese Daten... warum??

** BEARBEITEN: meinen Fehler gefunden - nichts falsch für mich mit Axios. Siehe meinen Kommentar zwei Kommentare unten. Kurz gesagt, meine Abfangjäger leiteten die Fehlerdaten nicht durch die Axios-Pipeline zurück, sodass ich immer undefiniert wurde.

@HoogsterInc Sehen Sie sich hier die TypeScript-Definitionen an
du könntest sowas machen

try {
   axios.get(...)
} catch (error) {
   if (error.reponse) {
      // http status 4x, 5xx
   } else {
      // network error like timeout, connection refused etc...
   }
}

Vielen Dank für die Antwort, die versucht hat, @konstantinblaesi zu helfen - ich habe mein Problem herausgefunden.

Für mich hatte ich einen Interceptor eingerichtet, um die Authentifizierung des Benutzers zu überprüfen, der einen bestimmten Fehlercode sendet, wenn er nicht authentifiziert wird. Ich habe die Fehlerdaten jedoch nicht weitergegeben, wenn der Fehler nicht mit einem nicht authentifizierten Code übereinstimmte ... seufz ... dummer schlimmer Fehler. Nachdem ich also nach dem nicht authentifizierten Fehlercode gesucht hatte, stellte ich sicher, dass Promise.reject(error) zurückgegeben wurde; - Das hat mein Problem gelöst und die Fehlerdaten sind jetzt vollständig.

Sie können err.toJSON()

catch((err) => {
    console.log(err.toJSON()); // Return error object
});

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

(auf global eingestellt)

in main.js

import axios from 'axios'

var instance = axios.create(
 { validateStatus: function (status) {
    return status < 600; #you can change this with another value
  }
 });

oder
(für besonderes einstellen)

  axios.post('/formulas/create', {
       name: "",
       parts: ""
  }, { validateStatus: function (status) {
          return status < 600; // Reject only if the status code is greater than or equal to 500
        }})
    .then( 
   (response) => { console.log(response) },
   (error) => { console.log(error) }
   );

Axios & Catch 500 Fehlerantwortdaten

const log = console.log;

  updateData(options = {}, flag = false){
    let url = `/opapi/appDownloadGuide/update`;
    let message = '更新成功!';
    let errorMessage = '更新失败!';
    if (flag) {
      message = '添加成功!';
      errorMessage = '添加失败!';
      url = `/opapi/appDownloadGuide/add`;
    }
    axios
    .post(url, options)
    .then(res => {
      // ❓🤔️500 , 在这里拦不住呀?
      log(`res`, res, res.status);
      return res.data;
    })
    .then(json => {
      const {
        code,
        success,
        data,
        errorCode,
        errorHint,
      } = json;
      if(code === 200) {
        this.$message({
          type: 'success',
          message,
        });
        this.init();
      } else{
        this.$message({
          type: 'error',
          message: `${errorMessage}: ${errorHint ? errorHint : ""}`,
        });
      }
    })
    .catch(err => {
      // 👌在这里拦截 error data!
      log(`error.response`, err.response);
      const {
        data,
        status,
        statusText,
      } = err.response;
      this.$message({
        type: "error",
        message: `${statusText}-${status}: ${data || ""}`,
        // message: "不能重复创建",
      });
      console.error(`500 err`, err);
    });
  },

https://stackoverflow.com/questions/38798451/how-to-catch-and-handle-error-response-422-with-redux-axios

Ich habe genau die gleiche Umgebung. Versuche dies:

axios.post('/formulas/create', {
  name: "",
  parts: ""
})
.then(response => { 
  console.log(response)
})
.catch(error => {
    console.log(error.response)
});

_Ändere von console.log(error) zu console.log(error.response) in catch _.

Sie können auch einen globalen Interceptor verwenden und nur error.response ablehnen. Das Problem besteht darin, dass, wenn console.log versucht, den Fehler auszugeben, die Zeichenfolgendarstellung gedruckt wird, nicht die Objektstruktur, sodass Sie die Eigenschaft .response nicht sehen.

Funktioniert bei mir nicht

@gopal-g das ist für mich undefiniert.

@gopal-g ja dasselbe undefined ich bekomme.

Ich verwende Axios 0.19.2. Ich habe die Lösung von

Andere Option

/**
 * Whenever error.message is accessed we want to se the full API error message (JSON) if it's present
 * not just some generic http status code + message
 * see https://github.com/axios/axios/issues/960 for context
 *
 * <strong i="9">@param</strong> axios
 */
export function extractAPIErrorResponse(axios: AxiosInstance) {
    axios.interceptors.response.use(undefined, function (error: AxiosError) {
        (error as any).originalMessage = error.message;
        Object.defineProperty(error, "message", { get: function () {
            if (!error.response) {
                return (error as any).originalMessage;
            }
            return JSON.stringify(error.response.data);
        }});
        return Promise.reject(error);
    })
}

Das hat bei mir funktioniert, vielen Dank @konstantinblaesi ! Ich verstehe nicht, warum das Standardverhalten von Axios nicht so ist - das Standardverhalten besteht darin, den "Nachricht"-Teil des ursprünglichen Fehlers zu löschen, der meiner Meinung nach der wichtigste Teil ist!

Nur um es klarzustellen, mein Server gibt in meiner App einen 400-Fehler zurück (der eine Antwort sein sollte):

% curl -X POST http://my-server/api -d '{"foo": "bar"}'
{"status": 400, "message": "missing param XYZ"}

und ohne diesen Fix erhalte ich von Axios ein Fehlerobjekt, das nur name , stack , config (das die ursprüngliche Anfrage enthält) und keine "Antwort" enthält. Aber mit diesem Fix enthält der Fehler die richtige message Eigenschaft vom Server.

Warum es ohne diesen Fix keine "Antwort"-Eigenschaft gibt, scheint mit settle in axios.js um Zeile 1171 zusammenzuhängen:

        module.exports = function settle(resolve, reject, response) {
          var validateStatus = response.config.validateStatus;
          if (!validateStatus || validateStatus(response.status)) {
            resolve(response);
          } else {
            reject(createError(
              'Request failed with status code ' + response.status,
              response.config,
              null,
              response.request,
              response
            ));
          }
        };

und Sie können sehen, dass es beim Erstellen des Fehlers nicht durch response.message . Außerdem sehe ich in meiner App die Antwort nicht in error.response , es gibt keine solche Eigenschaft - das verstehe ich nicht. Aber trotzdem funktioniert der obige Fix für mich.

Ich versuche, Validierungsfehler vom Server abzufangen.

Code:

axios.post('/formulas/create', {
       name: "",
       parts: ""
})
.then( 
  (response) => { console.log(response) },
  (error) => { console.log(error) }
);

Protokollausgabe der Konsole

Error: Request failed with status code 422
    at createError (app.js:6765)
    at settle (app.js:29489)
    at XMLHttpRequest.handleLoad (app.js:6600)

Ausgabe der Registerkarte Netzwerk
{"name":["Das Namensfeld wird benötigt."],"parts":["Das Teilefeld wird benötigt."]}

Ich sollte ein Objekt sehen, das eine JSON-Formularvalidierung enthält, da dies die Antwort in meiner Netzwerkregisterkarte ist. Ich scheine die JS-Catch-Ausgabe zu erhalten?

Habe auch folgendes probiert:

axios.post('/formulas/create', {
  name: "",
  parts: ""
})
.then(response => { 
  console.log(response)
})
.catch(error => {
    console.log(error)
});

Gleiches Ergebnis

Mehr Leute scheinen das gleiche Problem mit der gleichen Umgebung wie ich hier zu haben.
https://laracasts.com/discuss/channels/vue/issues-with-axios-catch-method

  • Axios-Version: ^0.16.2
  • VueJS 2.3.4
  • Vue-Vorlagen-Compiler 2.3.4
  • Laravel-Mix
  • Umgebung: Knoten v6.4.0, Chrome 58, Mac OSX 10.12.4

axios.post('/formulas/create', {
Name: "",
Teile: ""
})
.dann(
(Antwort) => { console.log(Antwort)},
).catch(err => consol.log(err.response.data)});

error.response ist ein Objekt , es wird [Objekt,Objekt] im Konsolenprotokoll ausgeben.
Sie müssen error.reposne.data verwenden, um auf die Fehlermeldung zuzugreifen.
siehe: https://itnext.io/javascript-error-handling-from-express-js-to-react-810deb5e5e28

@chandukasm ja, aber in meinem Fall habe ich _kein_ error.response -- es ist undefiniert, obwohl die Anfrage gesendet und die Antwort per Express empfangen wurde. Siehe auch meinen Kommentar oben; die Nachricht wird ignoriert (durch eine generische Nachricht ersetzt), auch wenn eine Antwort vorhanden ist.

error.response ist ein Objekt , es wird [Objekt,Objekt] im Konsolenprotokoll ausgeben.
Sie müssen error.reposne.data verwenden, um auf die Fehlermeldung zuzugreifen.
siehe: https://itnext.io/javascript-error-handling-from-express-js-to-react-810deb5e5e28

Wenn Sie [object,object] in console.log sehen, führen Sie einfach JSON.stringify(error.response) aus, um den tatsächlichen Fehler anzuzeigen.

Es gibt kein error.response Objekt.

return this.$axios
  .post(postUrl, payload, { responseType: 'json' })
  .then(
    (response) => {
      this.message = `RESP: ${JSON.stringify(response)}`;
    },
    (reason) => {
      this.message = `REAS: ${JSON.stringify(reason)}`;
    }
  )
  .catch((err) => {
    this.message = `CATCH: ${JSON.stringify(err)}`;
  });

payload enthält absichtlich einen falschen Wert, um HTTP 422 auszulösen, das in Postman wie erwartet funktioniert und der Server (LB4) einen vollständigen Fehler im JSON-Format zurückgibt, der erklärt, wo die Eingabedaten falsch waren, aber in Axios ist das error.response-Objekt undefiniert .

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

Baoyx007 picture Baoyx007  ·  3Kommentare

reggi picture reggi  ·  3Kommentare

ghost picture ghost  ·  3Kommentare

Adman picture Adman  ·  3Kommentare

ghprod picture ghprod  ·  3Kommentare