Как получить читаемый ответ об ошибке из javascript Fetch api?

Question

Я работаю над редукцией Reactjs на front-end и Rails api в качестве back-end.

Так что теперь я называю апи с Fetch метод апи, но проблема в том, что я не могу получить читаемое сообщение об ошибке, как то, что я получил внутри сети вкладок

это моя функция

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)); 

      }); 


    } 
} 

Но когда пришли ошибки я не могу понять, как получить читаемое сообщение ответа, как я получил, когда я проверяю свои вкладки в сети моего браузера

Так вот что я получил от сетевых вкладок, когда у меня появились ошибки.

Моя консоль

Это мои рельсы код

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 

Но я не могу узнать, как я могу получить, что внутри моей функции

Спасибо !

Answer 1

Вы возвращаете переменные не в response.body или response.message.

Вам нужно проверить атрибут ошибок для объекта ответа.

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

Проверить здесь https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Вы должны действительно быть возвращен код ответа об ошибке от сервера и использовать .catch() функцию выборки API

Answer 2

Прежде всего, необходимо вызвать метод JSon на ваш ответ.

Пример:

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) 
    }); 

Позвольте мне знать, журнал консоли, если он не работает для вас.

Answer 3

ОК, я думаю, что я, наконец, сломал это.

текст скрыт внутри обещания в пределах объекта ответа, поэтому его нужно обрабатывать, как обещание увидеть его.

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); 
    } 

Answer 4

Похожего на свой ответ, но с немного более подробным объяснением ... Я сначала проверить, является ли ответ ОК, а затем генерировать ошибку из response.text() только для случаев, которые мы имеем успешный ответ. Таким образом, сетевые ошибки (которые не являются ok) будут генерировать собственную ошибку без преобразования в текст. Затем эти ошибки попадают в нисходящий поток catch.

Вот мое решение - я вытащил основную выборку функции в функцию обертки:

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

Затем, когда я использую его, я определяю, как обрабатывать мой ответ и ошибки по мере необходимости в то время:

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) 
    })