How to get Readable error response from javascript Fetch api?

问题

I am working on Reactjs redux on front-end and Rails api as a back-end.

So now i call api with Fetch api method but the problem is i cannot get readable error message like what i got inside the network tabs

this is my function

export function create_user(user,userInfoParams={}) {

    return function (dispatch) {
        dispatch(update_user(user));

        return fetch(deafaultUrl + '/v1/users/',
            {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                method: "POST",
                body: JSON.stringify(userInfoParams)
            })
            .then(function(response) {
                console.log(response);
                console.log(response.body);
                console.log(response.message);
                console.log(response.errors);
                console.log(response.json());
                dispatch(update_errors(response));

                if (response.status >= 400) {
                    throw new Error("Bad response from server");
                }

            })
            .then(function(json){
                console.log("succeed json re");
                // We can dispatch many times!
                // Here, we update the app state with the results of the API call.

                dispatch(update_user(json));

            });


    }
}

But when errors came i cannot figure out how to get readable response message like i got when i check on my browser network tabs

So this is what i got from the network tabs when i got errors.

My console

This is my rails code

def create
    user = User.new(user_params)
    if user.save
      #UserMailer.account_activation(user).deliver_now
      render json: user, status: 201
    else
      render json: { errors: user.errors }, status: 422
    end
  end

But i cannot find out how can i get that inside my function

Thanks!

回答1:

ok, I think I finally cracked this.

text is hidden inside promise within response object, so it needs to be handled like a promise to see it.

fetch(bla)
    .then(res => {
      if(!res.ok) {
        res.text().then(text => throw Error(text))
       }
      else {
       return res.json();
     }    
    })
    .catch(err => {
       console.log('caught it!',err);
    }

回答2:

Similar to your answer, but with a bit more explanation... I first check if the response is ok, and then generate the error from the response.text() only for the cases that we have a successful response. Thus, network errors (which are not ok) would still generate their own error without being converted to text. Then those errors are caught in the downstream catch.

Here is my solution - I pulled the core fetch function into a wrapper function:

const fetchJSON = (...args) => {
  return fetch(...args)
    .then(res => {
      if(res.ok) {
        return res.json()
      }
      return res.text().then(text => {throw new Error(text)})
    })
}

Then when I use it, I define how to handle my response and errors as needed at that time:

fetchJSON(url, options)
  .then((json) => {
    // do things with the response, like setting state:
    this.setState({ something: json })
  })
  .catch(error => {
    // do things with the error, like logging them:
    console.error(error)
  })

回答3:

I think you need to do something like this

export function create_user(user,userInfoParams={}) {

  return function (dispatch) {
    dispatch(update_user(user));

    return fetch(deafaultUrl + '/v1/users/',
        {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            method: "POST",
            body: JSON.stringify(userInfoParams)
        })
        .then(function(response) {
            console.log(response);
            console.log(response.body);
            console.log(response.message);
            console.log(response.errors);
            console.log(response.json());
            return response.json();
        })
        .then(function(object){
          if (object.errors) {
            dispatch(update_errors(response));
            throw new Error(object.errors);
          } else {
            console.log("succeed json re");
            dispatch(update_user(json));
          }
        })
        .catch(function(error){
          this.setState({ error })
        })
       }
     }

回答4:

You variables coming back are not in response.body or response.message.

You need to check for the errors attribute on the response object.

if(response.errors) {
    console.error(response.errors)
}

Check here https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

You should actually be returning an error response code from the server and use the .catch() function of the fetch API

回答5:

First you need to call json method on your response.

An example:

fetch(`${API_URL}`, {
        method: 'post',
        headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json'
        },
        body: JSON.stringify(userInfoParams)
    })
    .then((response) => response.json())
    .then((response) => console.log(response)) 
    .catch((err) => {
        console.log("error", err) 
    });

Let me know the console log if it didn't work for you.

来源：https://stackoverflow.com/questions/40408219/how-to-get-readable-error-response-from-javascript-fetch-api

标签

javascript

reactjs

fetch-api