Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Axios in Nuxt.js is not catch error properly

Tags:

axios

nuxt.js

As I mentioned above my Axios on Nuxt.js is not catch error properly

I need to know the error, so I can prompt to let the user know their input is not correct but it only console.log the error code status not the message from my API

this is my code

await axios
  .post(
    "API LINK",
    {
      email: user.email,
      password: "123456",
      name: user.name,
      dob: user.dob ?? null,
      gender: user.gender ?? null,
      profileImage: imageUrl ?? user.profileImage,
      userType: user.userType
    }
  )
  .then(res => {
    console.log("success");
    console.log(res);
  })
  .catch(err => {
    console.log('fail');
    console.log(err)
  })

This is what log on a chrome console

error
add.vue?104b:181 Error: Request failed with status code 400
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:61)

But what I expect from the console.log(err) is

(This is response from postman)
{
    "message": "Error creating new user.",
    "error": {
        "code": "auth/invalid-password",
        "message": "The password must be a string with at least 6 characters."
    }
}

I have no idea what is happening.

like image 356
Purinut Avatar asked May 30 '20 14:05

Purinut


People also ask

Does Axios catch 400 error?

By default, the axios HTTP library throws an error anytime the destination server responds with a 4XX / 5XX error (for example, a 400 Bad Request ). Since axios raises an error, your workflow will stop at this step.

What is Axios in NUXT JS?

Nuxt. js provides an Axios module for easy integration with your application. Axios is a promise-based HTTP client that works in the browser and Node. js environment or, in simpler terms, it is a tool for making requests (e.g API calls) in client-side applications and Node.

What is NUXT error?

Nuxt 3 is a full-stack framework, which means there are several sources of unpreventable user runtime errors that can happen in different contexts: Errors during the Vue rendering lifecycle (SSR + SPA) Errors during API or Nitro server lifecycle. Server and client startup errors (SSR + SPA)

Is not defined in NUXT JS?

To fix the 'document is not defined' error in Nuxt. js, we can wrap our client side code with the client-only component. to wrap the the client side only your-component component with client-only so that it's only rendered in the browser.


2 Answers

Try this

 console.log(err.response)

To make the code cleaner you can destructure the argument:

  .catch(({ response }) => {
    console.log('fail');
    console.log(response)
  })

If you want to use some other property name instead of response you can do it like this:

  .catch(({ response: err }) => {
    console.log('fail');
    console.log(err)
  })

The problem is when the console.log tries to output the error, the string representation is printed, not the object structure, so you do not see the .response property.

Here you can read about https://github.com/axios/axios/issues/960

like image 163
Ifaruki Avatar answered Oct 17 '22 01:10

Ifaruki


This is working with a try / catch structure, which is the preferred way

  try {
    await axios.post("API LINK", {
      email: user.email,
      password: "123456",
      name: user.name,
      dob: user.dob ?? null,
      gender: user.gender ?? null,
      profileImage: imageUrl ?? user.profileImage,
      userType: user.userType,
    })
    console.log("success", res)
  } catch ({ response }) {
    console.log("fail", response)
  }
like image 1
Marcel Posdijk Avatar answered Oct 17 '22 01:10

Marcel Posdijk