Получение полезных данных ответа API с использованием fetch - PullRequest
Новая
       33

Получение полезных данных ответа API с использованием fetch

0 голосов
/ 02 октября 2019

Я использую fetch для получения ответа API на запросы GET и POST. Когда происходит ошибка, я могу видеть код состояния и текст, т. Е. 400 Bad Request. Однако передается дополнительная информация, объясняющая, почему возникла ошибка (т. Е. Имя пользователя не соответствует). Я могу видеть это дополнительное сообщение в полезной нагрузке ответа через консоль инструмента разработчика Firefox, но я не уверен, как получить его через обработку ответа выборки.

Вот пример запроса: 

fetch(url, {
  method: 'POST',
  body: JSON.stringify({
    name: name,
    description: description
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
    "Authorization": "Bearer " + token
  }
}).then(response => {
  if (!response.ok) {
    throw Error(response.statusText)

  }
  return response
})
.catch(error => {
  console.log(error)
})

Есть идеи? Спасибо.

Ответы [ 4 ]

0 голосов
/ 22 октября 2019

Спасибо всем за ваши предложения.

Этот урок помог мне понять, что делать.

https://css -tricks.com / using-fetch /

Моя проблема заключалась в том, что при возникновении ошибки ответ - не JSON, это текст. Поэтому мне нужно было сделать что-то вроде этого (взято с css-tricks.com): 

fetch('https://api.github.com/users/chriscoyier/repos')
.then(response => response.text())
  .then(data => {
    console.log(data)
  });
0 голосов
/ 02 октября 2019

@ Voxum, в вашем ответе отсутствует важная информация, например, метод ... и ; await - это хорошо, но помните, что оно должно быть в асинхронной функции, и вам не нужно его использовать, если вы "thenify" .then() поскольку это возвращает обещание. из документации Fetch, это их основной пример get / HTML. я думаю, что ОП запрашивает вызов API для различных типов методов, что потребует более сложной настройки.

Дело в том, что с ответом 400 сервер не выдает ответное сообщение, как 404(например) говорит вам, что страница не найдена. Обычно сервер дает вам ответное сообщение только тогда, когда вы получаете хороший результат (success / 200). обычно это будет сообщение в response.json () или response.text () в зависимости от того, возвращаются ли ваши данные.

после того, как вы вызовете fetch с помощью URL, метода и любых заголовков, используйте .then((response) => {console.log(response.json());}); для json ииспользуйте .then((response) => {console.log(response.text());}); для xml / text

OP правильно настроил выборку, но просто нужно использовать response.json() или response.text(). опять же, ответ 200 может быть «неправильным паролем», и именно здесь вы будете использовать это. не ожидайте ответа тела на 400/500. удачи!

0 голосов
/ 03 октября 2019

Вы, кажется, передаете только поле statusText ответа, которое соответствует коду HTTP-статуса (а не телу ответа) - например Bad Request для кода HTTP-ответа 400.

Вы можете прочитать тело ответа, используя один из методов, определенных для объекта Response, возвращаемого API выборки. Например, если вы ожидаете тело ответа JSON, у вас может быть: 

const onSuccess = response => {
  // Do something with the response
  // What you return from here will go to the next .then
}

const onFailure = response => {
  // response.json() returns a promise that resolves to the JSON sent in the body
  // Note that whatever is returned from here will go to the next .then
  // To go to the next .catch, you can throw from here
  return response.json().then(jsonResponse => console.log(jsonResponse))
}

fetch(url, {
  method: 'POST',
  body: JSON.stringify({
    name: name,
    description: description
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
    "Authorization": "Bearer " + token
  }
}).then(response => {
  if (!response.ok) {
    throw response
  }
  return response
})
.then(onSuccess, onFailure)
.catch(err => { /* Any error thrown from the handlers will be caught here */ })

Для получения более подробной информации вы можете обратиться к документации по объекту ответа .

0 голосов
/ 02 октября 2019

Исходя из документов, я бы сделал что-то более похожее на это: 

const response = await fetch('http://example.com/movies.json')
const myJson = await response.json();
console.log(JSON.stringify(myJson));

В противном случае вам придется делать все внутри вашего .then().

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

...