Как получить response json js

Что делает метод .json()

Если не сделать response.json() — приходит пустой массив. Исходя из этого у меня возник вопрос — что именно делает метод .json()? Превращает json формат в объект? но для этого же есть JSON.parse() и он мне не помог, когда я поставил его вместо .json. Заранее спасибо!

Отслеживать
задан 25 авг 2021 в 13:34
47 1 1 серебряный знак 6 6 бронзовых знаков
Привет, learn.javascript.ru/fetch тут подробно описано
25 авг 2021 в 13:35

и еще, что означает => это сокращенная запись функции что ли, но ведь нету круглых скобок даже. Или это уникальный синтаксис для промисов?

25 авг 2021 в 13:35

Спасибо за ответ, там написано только response.json() – декодирует ответ в формате JSON, мне это ни о чем не говорит.

fetch ( )

С помощью функции fetch ( ) можно отправлять сетевые запросы на сервер — как получать, так и отправлять данные. Метод возвращает промис с объектом ответа, где находится дополнительная информация (статус ответа, заголовки) и ответ на запрос.

Как понять

Скопировать ссылку «Как понять» Скопировано

Браузер предоставляет глобальный API для работы с запросами и ответами HTTP. Раньше для подобной работы использовался XMLHttpRequest, однако fetch ( ) более гибкая и мощная альтернатива, он понятнее и проще в использовании из-за того, что использует Promise .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Функция fetch ( ) принимает два параметра:

• url — адрес, по которому нужно сделать запрос;
• options (необязательный) — объект конфигурации, в котором можно настроить метод запроса, тело запроса, заголовки и многое другое.

По умолчанию вызов fetch ( ) делает GET-запрос по указанному адресу. Базовый вызов для получения данных можно записать таким образом:

 fetch('http://jsonplaceholder.typicode.com/posts') fetch('http://jsonplaceholder.typicode.com/posts')    Скопировать Скопировано Не удалось скопировать   

Результатом вызова fetch ( ) будет Promise , в котором будет содержаться специальный объект ответа Response . У этого объекта есть два важных для нас поля:

• ok — принимает состояние true или false и сообщает об успешности запроса;
• json — метод, вызов которого, возвращает результат запроса в виде json.

В следующем примере используем .then ( ) — обработчик результата, полученного от асинхронной операции. Обработчик дождётся ответа от сервера, принимает ответ, и, в данном случае, неявно возвратит ответ, обработанный методом .json();

 fetch('http://jsonplaceholder.typicode.com/posts') // функция then вернет другой промис (их можно чейнить). Когда отрезолвится промис (r.json()), который вернула функция then, будет вызван следующий колбек в цепочке .then((response) => response.json()) // Получим ответ в виде массива из объектов [, , , . ] fetch('http://jsonplaceholder.typicode.com/posts') // функция then вернет другой промис (их можно чейнить). Когда отрезолвится промис (r.json()), который вернула функция then, будет вызван следующий колбек в цепочке .then((response) => response.json()) // Получим ответ в виде массива из объектов [, , , . ]    Скопировать Скопировано Не удалось скопировать   

С помощью второго аргумента options можно передать настройки запроса. Например, можно изменить метод и добавить тело запроса, если мы хотим не получать, а отправлять данные. Так же в запрос можно добавить заголовки в виде объекта или специального класса Headers .

 const newPost =  title: 'foo', body: 'bar', userId: 1,> fetch('https://jsonplaceholder.typicode.com/posts',  method: 'POST', // Здесь так же могут быть GET, PUT, DELETE body: JSON.stringify(newPost), // Тело запроса в JSON-формате headers:  // Добавляем необходимые заголовки 'Content-type': 'application/json; charset=UTF-8', >,>) .then((response) => response.json()) .then((data) =>  console.log(data) // >) const newPost =  title: 'foo', body: 'bar', userId: 1, > fetch('https://jsonplaceholder.typicode.com/posts',  method: 'POST', // Здесь так же могут быть GET, PUT, DELETE body: JSON.stringify(newPost), // Тело запроса в JSON-формате headers:  // Добавляем необходимые заголовки 'Content-type': 'application/json; charset=UTF-8', >, >) .then((response) => response.json()) .then((data) =>  console.log(data) // >)    Скопировать Скопировано Не удалось скопировать   

Cookies

Скопировать ссылку «Cookies» Скопировано

По умолчанию fetch ( ) запросы не включают в себя cookies и потому авторизованные запросы на сервере могут не пройти. Для этого необходимо добавить в настройку поле credentials :

 fetch('https://somesite.com/admin',  method: 'GET', // или 'same-origin' если можно делать такие запросы только в пределах этого домена credentials: 'include',>) fetch('https://somesite.com/admin',  method: 'GET', // или 'same-origin' если можно делать такие запросы только в пределах этого домена credentials: 'include', >)    Скопировать Скопировано Не удалось скопировать   

Обработка ошибок

Скопировать ссылку «Обработка ошибок» Скопировано

Любой ответ на запрос через fetch ( ) (например HTTP-код 400, 404 или 500) переводит Promise в состояние fulfilled. Промис перейдёт в состояние rejected только если запрос не случился из-за сбоя сети или что-то помешало выполнению fetch ( ) .

 // Запрос вернет ошибку 404 Not Foundfetch('https://jsonplaceholder.typicode.com/there-is-no-such-route').catch( () =>  console.log('Error occurred!') >) // Никогда не выполнится // Запрос вернет ошибку 404 Not Found fetch('https://jsonplaceholder.typicode.com/there-is-no-such-route').catch( () =>  console.log('Error occurred!') > ) // Никогда не выполнится    Скопировать Скопировано Не удалось скопировать   

Чтобы обработать ошибку запроса, необходимо обращать внимание на поле ok в объекте ответа Response . В случае ошибки запроса оно будет равно false .

 fetch('https://jsonplaceholder.typicode.com/there-is-no-such-route') .then((response) =>  // Проверяем успешность запроса и выкидываем ошибку if (!response.ok)  throw new Error('Error occurred!') > return response.json() >) // Теперь попадём сюда, т.к выбросили ошибку .catch((err) =>  console.log(err) >) // Error: Error occurred! fetch('https://jsonplaceholder.typicode.com/there-is-no-such-route') .then((response) =>  // Проверяем успешность запроса и выкидываем ошибку if (!response.ok)  throw new Error('Error occurred!') > return response.json() >) // Теперь попадём сюда, т.к выбросили ошибку .catch((err) =>  console.log(err) >) // Error: Error occurred!    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Егор Огарков советует

Скопировать ссылку «Егор Огарков советует» Скопировано

Прощай, XMLHttpRequest!

fetch() позволяет вам делать запросы, схожие с XMLHttpRequest (XHR). Основное отличие заключается в том, что Fetch API использует Promises (Обещания), которые позволяют использовать более простое и чистое API, избегать катастрофического количества callback’ов и необходимости помнить API для XMLHttpRequest.

Fetch API стал доступен пользователям вместе с Service Worker’ами в global скоупе в Chrome 40, однако уже в версии 42 он станет доступен в скоупе window. Разумеется, для всех остальных браузеров, которые пока ещё не поддерживают fetch существует полифил от GitHub, который доступен уже сегодня.

Простой Fetch запрос

Давайте начнём со сравнения простого примера, реализованного с XMLHttpRequest и fetch . Всё, что мы будем делать в этом примере — сделаем запрос на URL, получим ответ и распарсим его как JSON.

XMLHttpRequest

Пример с XMLHttpRequest потребует от нас установить два обработчика событий на success и error , а так же вызвать два метода: open() и send() . Пример из MDN документации:

function reqListener() < var data = JSON.parse(this.responseText); console.log(data); >function reqError(err) < console.log('Fetch Error :-S', err); >var oReq = new XMLHttpRequest(); oReq.onload = reqListener; oReq.onerror = reqError; oReq.open('get', './api/some.json', true); oReq.send(); 

Fetch

Наш fetch запрос будет выглядеть так:

fetch('./api/some.json') .then( function(response) < if (response.status !== 200) < console.log('Looks like there was a problem. Status Code: ' + response.status); return; >// Examine the text in the response response.json().then(function(data) < console.log(data); >); > ) .catch(function(err) < console.log('Fetch Error :-S', err); >); 

Первым делом мы проверяем статус ответа и проверяем, успешно ли выполнился запрос (ожидаем 200 статус). Если всё хорошо, то парсим ответ как JSON.

Ответом fetch() является Stream-объект. Это означает, что в результате вызова метода json() мы получим Promise, т.к. чтение из подобного объекта является асинхронным.

Метаданные ответа

В предыдущем примере мы изучили, как можно проверить статус объекта ответа и конвентировать сам ответ в JSON. Остальные метаданные, к которым вы возможно получить доступ (например, заголовки), приведены ниже:

fetch('users.json').then(function(response) < console.log(response.headers.get('Content-Type')); console.log(response.headers.get('Date')); console.log(response.status); console.log(response.statusText); console.log(response.type); console.log(response.url); >); 

Типы ответа

Когда мы делаем fetch-запрос, ответу будет дан тип «basic», «cors» или «opaque». Эти «типы» указывают на то, с какого ресурса пришли данные и могут быть использованы для того, чтобы определить процесс обработки данных.

Когда запрос сделан на ресурс, находящимся на том же origin (имеется ввиду, что запрос выполняется в рамках одного сайта. прим. пер.), ответ будет содержать тип «базовый» и для такого запроса не будет никаких ограничений.

Если запрос сделан с одного origin’а на другой (кроссдоменный запрос), который, в свою очередь, вернул CORS заголовки, тогда типом будет являться «cors». Объекты с типами «cors» и «basic» почти идентичны, однако «cors» несколько ограничивает метаданные, к которым может быть получен доступ до «Cache-Control», «Content-Language», «Content-Type», «Expires», «Last-Modified», и «Pragma».

Что касается «opaque» — то он приходит в случаях, когда выполняется CORS запрос, но удаленный ресурс не возвращает CORS заголовки. Данный тип запроса не предоставляет доступ данным или заголовку статуса, поэтому мы не имеем возможности судить о результате выполнения запроса. В рамках текущей имплементации fetch() не представляется возможности выполнять CORS запросы из скоупа window, и вот здесь написано почему. Эта функциональность должна быть добавлена, как только Cache API станет доступным из объекта window.

Вы можете определить ожидаемый режим запроса, тем самым фильтруя результаты запросов с неподходящим типом. Режим запроса может быть установлен на следующий:

— “same-origin” успешно выполняется только для запросов на тот же самый origin, все остальные запросы будут отклонены.
— “cors” работает так же, как «same-origin» + добавляет возможность создавать запросы к сторонним сайтам, если они возвращают соответствующие CORS заголовки.
— “cors-with-forced-preflight” работает так же, как «cors», но перед запросом всегда отсылает тестовый запрос на проверку.
— “no-cors” используется, когда необходимо выполнить запрос к origin, который не отсылает CORS заголовки и результатом выполнения является объект с типом «opaque». Как говорилось выше, в данный момент это невозможно в скоупе window.

Чтобы определить режим запроса, добавьте объект опций вторым параметром к запросу и установите «mode» в этом объекте:

fetch('http://some-site.com/cors-enabled/some.json', ) .then(function(response) < return response.text(); >) .then(function(text) < console.log('Request successful', text); >) .catch(function(error) < log('Request failed', error) >); 

Цепочки Promises

Одной из прекрасных особенностей Promise’ов является возможность группировать их в цепочки. Если говорить о них в скоупе fetch() , то они позволяют нам «шарить» логику между запросами.

Если вы работаете с JSON API, вам потребуется проверить статус и распарсить JSON для каждого ответа. Вы можете упростить свой код, определив парсинг статуса и JSON как раздельные функции, которые вернут Promise’ы. Вам останется подумать только об обработке самих данных и, разумеется, исключений.

function status(response) < if (response.status >= 200 && response.status < 300) < return Promise.resolve(response) >else < return Promise.reject(new Error(response.statusText)) >> function json(response) < return response.json() >fetch('users.json') .then(status) .then(json) .then(function(data) < console.log('Request succeeded with JSON response', data); >).catch(function(error) < console.log('Request failed', error); >); 

Мы определяем функцию, которая проверяет response.status и возвращает результат: Promise.resolve() или Promise.reject() . Это первый вызванный метод в нашей цепочке, и если он успешно завершается( Promise.resolve() ), то вызывается следующий за ним метод — fetch() , который, в свою очередь, опять возвращает Promise от response.json() . После этого вызова, в случае удачного выполнения, у нас будет готовый JSON объект. Если парсинг провалится, Promise будет отменен и сработает условие возникновения исключения.

Но самое лучшее здесь — это возможность переиспользовать такой код для всех fetch-запросов в приложении. Такой код проще поддерживать, читать и тестировать.

POST запрос

Уже давно никого не удивишь необходимостью использовать POST метод с передачей параметров в «теле» запроса для работы с API.
Чтобы осуществить такой запрос, мы должны указать соответствующие параметры в объекте настроек fetch() :

fetch(url, < method: 'post', headers: < "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" >, body: 'foo=bar&lorem=ipsum' >) .then(json) .then(function (data) < console.log('Request succeeded with JSON response', data); >) .catch(function (error) < console.log('Request failed', error); >); 

Посылаем учётные данные через Fetch-запрос

Если вы хотите отправить запрос с каким-либо учётными данными (например, с cookie), вам следует установить `credentials` в опциях запроса на «include»:

fetch(url, < credentials: 'include' >) 

FAQ

Могу ли я отменить fetch() запрос?
В настоящий момент это невозможно, но это активно обсуждается на GitHub

Существует ли полифил?
Да

Почему «no-cors» реализован для service workers, но не для window?
Это было сделано из соображений безопасности. Подробнее можно ознакомиться здесь.

• Веб-разработка
• JavaScript
• Программирование

js fetch как получить данные

fetch — это метод JavaScript для отправки запросов на сервер и получения ответов. Он используется для получения данных с сервера в формате JSON, XML, HTML и других форматах.

Пример использования fetch для получения данных в формате JSON:

fetch('https://example.com/data.json') .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.error(error));