Level 37
Yes I had that problem too
.catch(error => {
this.onFail(error.response.data);
reject(error.response.data);
});
And besides you don't need to put the whole axios call in a promise... it's a promise already.
1 like
May 24, 2017
14
Level 2
Issues with Axios catch method
I followed Jeffery's Vue2.0 series. For whatever reasons I am not able to post the question on that video. Let me try it here.
I am using axios to make the HTTP request to post the data. It's working perfectly finem but when when I try to submit the empty body (which I shouldn't) I don't see the error message in the span block down there. I get something like this in the console.
POST http://..../statuses 422 (Unprocessable Entity) /#/:1 Uncaught (in promise) Object {ob: Observer}
Network preview shows:
{body: ["The body field is required."]} body: ["The body field is required."]
Here's the code that makes use of Axios.
eturn new Promise((resolve, reject) => {
axios[requestType.toLowerCase()](url, this.getData())
.then(response => {
this.onSuccess(response);
resolve(response);
})
.catch(error => {
this.onFail(error);
reject(error);
});
});
Level 2
@Borisu It still didn't solve the issue. Still getting the same error.
Level 37
Hm, what about if you just console.log(error)?
Level 50
What if you pass the error handler into the then method?
...
.then(
(response) => { handleResponse(response); },
(error) => { handleError(error); }
)
...
Level 2
@jbloomstrom it's working fine when when I used your solution. Could you please explain why is it working when I put both in the then method??
Level 37
This should not work, you have a lingering issue somewhere
1 like
Level 2
@Borisu I'll debug each and every like again. I don't really know a lot about this. I am new to the Javascript world
Level 37
Well the main thing is, you've got it working now. Good luck with the rest :)
Level 2
@Borisu I can't accept that as a solution. Still debugging :(
Level 37
Ok lets debug together:
axios.post(url, data)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
});
Do it exactly like this, as "un-dynamic" as possible.
Level 2
@Borisu I did what you said. I did the same in another project, but I am still getting the same error.
Either I am repeating some stupid mistake or something's wrong with axios (which seems unlikely).
updateStatus() {
axios.post('/chatty/status', {
body: this.body,
}).then(response => console.log(response))
.catch(error => console.log(error));
}
whenever I submit empty text to the server, laravel performs its validation to check for the required field and then returns the error.
console.log(error) returns this
Error: Request failed with status code 422
at createError (app.js:2291)
at settle (app.js:8935)
at XMLHttpRequest.handleLoad (app.js:2129)
What's wrong with my code?? :(
Level 37
@pritam1605 Well you should get rid of the comma after this.body and check again. In any case 422 mean unprocessable entity, which means the thing you sent to the server is not the right format. Can you dd(request()) in your controller to see what you are receiving?
Level 1
I got the exactly same problem, code:
axios.post('/formulas/create', {
name: "",
parts: ""
})
.then(
(response) => { console.log(response) },
(error) => { console.log(error) }
);
Console log output
Error: Request failed with status code 422
at createError (app.js:6765)
at settle (app.js:29489)
at XMLHttpRequest.handleLoad (app.js:6600)
I should be seeing laravel form validation as that is the response in my network tab, i seem to get the JS catch output?
Also tried the following:
axios.post('/formulas/create', {
name: "",
parts: ""
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
});
Same result, i use Laravel spark and:
"axios": "^0.16.2",
"vue": "~2.3.4",
"vue-template-compiler": 2.3.4
Level 2
Found the answer. https://github.com/mzabriskie/axios/issues/960
Please or to participate in this conversation.