Использование ответа в React

Question

Может ли кто-нибудь выделить разницу между этими двумя фрагментами кода в React?

window.fetch(url)
  .then((response) => {
    console.log(response.json().content);
})

и

window.fetch(url)
  .then((response) =>  response.json())
  .then((data) =>{
    console.log(data.content);
})

ответ содержит объект Java, а содержимое является одним из полейв этом объекте.

2-й фрагмент печатает правильное значение содержимого, тогда как 1-й фрагмент печатает неопределенное значение.

Редактировать: Мой вопрос не о том, «почему ответ дает обещание, а не обычныйобъект».Это больше о том, каковы последствия ответа на обещание.

Answer 1

Это потому, что response.json() возвращает обещание . Поскольку оно возвращает обещание, то для его ответа используется еще один then.Больше информации об обещаниях можно найти здесь .

При использовании javascript fetch вам необходимо преобразовать ответ в json, используя response.json().Вы можете пропустить дополнительный шаг преобразования ответа в json, используя axios например

axios.get(url)
  .then(res => {console.log(res)})

Answer 2

Следующий фрагмент не работает, потому что response.json() возвращает Обещание, а не простой объект, поэтому во втором фрагменте он возвращает правильное значение, так как вы using .then, чтобы получить значение

window.fetch(url)
  .then((response) => {
    console.log(response.json().content); // response.json() is not an object but a promise and hence you can't access content from it directly
})

Второй фрагмент эквивалентен

window.fetch(url)
  .then((response) => {
    response.json().then((content) => console.log(content)); 
})

, но его можно упростить до цепных обещаний, возвращая response.json() promise из первого .then, как показано во втором фрагменте