显示从 POST 请求收到的返回

Question

I'm using vanilla javascript to create a POST request to my Flask App. I have a validation check when a user tries to sign up with an existing username. I send a 406 status back along with "Error": "Username already taken."

My question is, how do I get that error message to display on my frontend from a POST request?

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
  body: JSON.stringify({
    username: e.target.username.value,
    friend_code: parseInt(e.target.friend_code.value),
    dark_mode: null,
    theme: null,
    avatar: null,
    created_at: null,
  }),
});

Answer 1

If you're using Promise then in the first then block check the status property of response and if it's 406 then display error if you're using async await than try to read status property from your response variable.

something like this promise example

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
  body: JSON.stringify({
    username: e.target.username.value,
    friend_code: parseInt(e.target.friend_code.value),
    dark_mode: null,
    theme: null,
    avatar: null,
    created_at: null,
  }),
})
.then(response => {
 if (response.status === 406) {
   // your display logic 
 } else {
   // other logic
 }
});

Answer 2

I have created a similar response -> http://www.mocky.io/v2/5e90c0443300009200e9cc52

{
 "message":"Username already taken"   
}

and sent it with 406 status.

In order to get the message, i did res=> res.json() to return another promise and then res.message to get the message

  fetch("http://www.mocky.io/v2/5e90c0443300009200e9cc52")
    .then(res=> res.json())
    .then(res=> console.log(res.message))
    .catch(err=> console.log(err))

In your case res.Error