Рубрики
Без рубрики

Используя Fetch для отправки HTTP-запросов в JavaScript

Во время разработки программного обеспечения HTTP-запросы сделаны все время. Мы будем изучать Fetch API – современный, основанный на обещании подход к формам HTTP.

Автор оригинала: Arpan Abhishek.

Вступление

API JavaScript Precte позволяет нам отправлять HTTP-запросы. С тех пор это была стандартная часть JavaScript с Ecmascript 2015 (Обычно известный как ES6) был введен и использует обещания.

Эта статья сначала покажет вам, как были сделаны запросы с ванильным JavaScript до того, как был разработан API Fetch. Затем мы будем руководить вами о том, как использовать API Fetch, подчеркивая, сколько улучшения он является над другими методами.

Настраивать

Эта статья смотрит на использование API Fetch, чтобы сделать HTTP-запросы в браузере. Таким образом, нам нужно настроить HTML-страницу, которую можно отобразить наш браузер. В вашем рабочем пространстве начать с создания index.html файл.

index.html Файл будет использоваться по всей статье. Страница HTML не имеет текстового контента, он будет использоваться только для загрузки файлов JS, чтобы мы могли видеть запросы и ответы в консоли нашего браузера:






    
    
    
    JavaScript HTTP Requests

Мы изменим Сценарий Тег Когда мы изучаем новые темы, но остальная часть HTML останется прежней.

Вы также хотите открыть консоль браузера, чтобы мы могли видеть результаты наших HTTP-запросов. Обычно это делается, щелкнув правой кнопкой мыши на веб-странице и выбирая «проверку». На хроме это выглядит так:

Пункт меню «Осмотрите» при щелчре правой кнопкой мыши в Chrome

Теперь давайте выберем вкладку «Консоль», чтобы мы могли видеть любой выход, который наши журналы JavaScript:

Вкладка «Консоль» в нашей консоли разработчиков

Вы все настроили! Давайте начнем отправлять HTTP-запросы с первым методом возможным с JavaScript – XMLHTTPREQUEST Отказ

Запросы с XMLHTTPREQUEST.

До того, как существовала PRETCE API, все запросы на JavaScript были сделаны с помощью XMLHTTPREQUEST (или XHR ) объект. Несмотря на свое имя, этот объект может получать данные в любом формате с сервера. Это не просто ограничено XML.

Давайте получим руки с помощью запроса XHR в нашем браузере. В той же папке, что и ваша index.html Файл, создайте новый xhr.js файл.

Этот новый файл JavaScript создаст объект XHR и отправить Получить Запрос на JSON API. Затем мы будем регистрировать результаты запроса в консоли. В вашем xhr.js Файл, введите следующее:

let xhr = new XMLHttpRequest();
xhr.open('get', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.send();

xhr.onload = function() {
    console.log(xhr.response);
};

В первой строке мы создали новый XMLHTTPREQUEST объект. Затем мы использовали Открыть () Способ создания нового HTTP-запроса. Первый аргумент Открыть () это метод HTTP по запросу – в этом случае мы отправляем Получить запрос. Второй аргумент – это URL с помощью ресурса сервера, который мы хотим. Затем мы используем Отправить () Метод для отправки запроса.

Когда XHR Успешно получает данные из сети, она отправляет нагрузка мероприятие. Для обработки данных после его загрузки мы установили функцию для oepload Собственность XHR объект. В этом случае мы просто регистрируем ответ на консоль.

Теперь в вашей консоли разработчики вы должны увидеть следующее.

JSON Выход XHR запрос на посты в блоге

Хорошая работа по созданию запроса API с XMLHTTPREQUEST !

В то время как обслуживает, как он обрабатывает асинхронные данные, сильно отличается от организованных и стандартизированных обещаний, используемых в современном JavaScript. Мы можем поддерживать более легкий код с API Fetch.

API

PRETCH API – это API на основе обещания для создания HTTP-запросов, похоже на то, что мы использовали XMLHTTPREQUEST Отказ В отличие от XMLHTTPREQUEST Нам не нужно создавать новые объекты при использовании API Fetch. Браузеры поставляются с глобальным fetch () Функция, которую мы можем использовать, чтобы сделать запросы.

Давайте посмотрим, как мы можем использовать эту API, чтобы сделать HTTP-запросы через Интернет.

Отправка запросов с Fetch

API Fetch может сделать Получить , Пост , Поставить , Патч , Удалить и Другие виды HTTP-запросов Отказ Мы сосредоточимся на двух наиболее распространенных методах, используемых в форматах HTTP: Получить и Пост Отказ

Получить запросы

Давайте использовать Fetch API, чтобы сделать Получить Запрос на https://jsonforkholder.typicode.com/posts/1 Как мы сделали с XMLHTTPREQUEST ранее.

В вашем index.html Файл, изменить Сценарий Тег для ссылки на новый файл JavaScript:

Теперь создайте новый fetchget.js файл в том же рабочем пространстве. Мы будем отправлять Получить Запросите и снова введите вывод на консоль. Введите следующий код в fetchget.js :

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(json => console.log(json));

В первой строке мы используем глобальные fetch () Функция для отправки Получить Запрос на нашу API. Аргумент fetch () это URL с сервером-боковым ресурсом.

Затем мы цепи о обещании с тогда () Метод, который захватывает ответ HTTP в ответ аргумент и позвоните его JSON () метод. JSON () Метод определяет тело ответ на объект JSON. Однако он возвращает, что как обещание.

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

Перезагрузить index.html При необходимости, чтобы вы могли видеть следующий вывод:

JSON Выход Fetch запрос для сообщений блога

Примечание : Вывод будет выглядеть по-другому для того, что мы получили, когда мы сделали Получить Запрос с XMLHTTPREQUEST Отказ Это потому, что XMLHTTPREQUEST Возвращает данные отклика HTTP в виде строки, тогда как мы проанализировали данные на объект JSON. Хотя возвращенные форматы разные, их содержимое одинаково.

Давайте посмотрим, как мы можем использовать fetch () отправлять данные в Пост запрос.

Опубликовать запросы

Мы можем загружать данные с fetch () Добавляя объект JavaScript в качестве второго аргумента с необходимой информацией для отправки HTTP-запроса.

Давайте использовать fetch () Загрузить данные JSON в Пост Запрос на макет API. В вашем index.html Файл, изменить Сценарий Тег для ссылки на новый файл JavaScript:

Теперь создайте fetch post.js в вашем рабочем пространстве, чтобы мы могли сделать Пост Запрос на API, который загрузит новый товар для объекта JSON. Введите код ниже в fetch post.js :

const todo = {
    title: 'Some really important work to finish'
};

fetch('https://jsonplaceholder.typicode.com/todos', {
        method: 'POST',
        body: JSON.stringify(todo),
        headers: {
            'Content-type': 'application/json; charset=UTF-8'
        }
    })
    .then(response => response.json())
    .then(json => {
        console.log(json);
    });

Первое, что мы делаем, это создать Todo Объект, который содержит данные, которые мы хотели бы отправить на API.

Как с Получить Запросы, мы используем fetch () Предоставляя URL API, мы хотим достичь. Однако на этот раз у нас есть объект в качестве второго аргумента для fetch () со следующими свойствами:

  • Метод : Строка, которая указывает с методом HTTP для использования в запросе
  • Тело : Строка с любыми данными, которые мы хотим дать серверу в нашем запросе
  • Заголовки : Объект, который позволяет нам добавлять любые заголовки, мы хотим, чтобы наши HTTP-запросы включают

Как с Получить Запрос, мы обработаем ответ сервера как JSON и вхожу в систему на консоль разработчика. Перезагрузка нашего index.html следует показать нам следующий выход консоли:

JSON Выход заправки PECTE POST POST добавить новый элемент «TODO»

Отличная работа, используя fetch () Чтобы загрузить данные через Пост запрос!

Теперь, когда у нас есть дескриптор для создания различных HTTP-запросов с API Fetch, давайте посмотрим, как мы можем обрабатывать разные ответы HTTP.

Обработка ответов с получением

До сих пор мы разбираем данные ответа JSON. Хотя это работает с API, используемым в примере, другой ответ может вернуть различные типы данных не json.

Объект HTTP ответ, который возвращается после успешного fetch () Запросы могут быть проанализированы на различные форматы. В дополнение к JSON () Метод, мы можем использовать следующее:

  • Текст () : Возвращает ответ как строковые данные
  • BLOB () : Возвращает ответ в виде объекта BLOB (двоичные данные вместе с его кодировкой)
  • formdata () : Верните ответ как Formdata объект (который хранит пары ключа-значений строковых данных)
  • ArrayBuffer () : Верните ответ как ArrayBuffer (низкоуровневое представление двоичных данных)

Как JSON () Метод, эти функции возвращают обещание с контентом. Поэтому они все должны быть прикованы к тогда () Функция, поэтому содержимое может быть обработано.

Эти функции используются для обработки успешных откликов HTTP, которые возвращают данные. Давайте теперь посмотрим и как мы можем обрабатывать ошибки с API Fetch.

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

Как с любым другим обещанием, fetch () Ошибки обрабатываются в поймать () Метод, который помещен в конце цепочки обещания. Тем не менее, поймать () Функция используется только если fetch () не мог отправить запрос. Это обычно означает, что произошла сетевая ошибка.

Если мы попытаемся получить доступ к URL-адресу, которое не существует, и сервер возвращает 404, он не будет пойман в поймать () Метод, как 404 – это действительный статус ответа HTTP.

Следовательно, при обработке ошибок с API Fetch нам нужно сделать две вещи:

  • Включить поймать () пункт в конце цепочки обещания, чтобы забрать любые сетевые ошибки
  • Проверьте код состояния HTTP ответа, чтобы увидеть, было ли это успешно или нет.

Давайте сделаем еще один пример, где мы пытаемся получить URL, который не существует.

Используя наши Получить Пример запроса мы можем использовать поймать () как это:

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(err => console.error(err));

Тем не менее, поймать () Функция используется только в том случае, если fetch () Запрос не может быть отправлен. В вашем index.html Файл, измените тег скрипта, чтобы ссылаться на новый файл JavaScript:

Теперь в вашем рабочем пространстве создайте новый fetcheRor.js файл. Введите следующий код:

fetch("https://jsonplaceholder.typicode.com/notreal/")
    .then(response => {
        if (!response.ok) {
            throw new Error("Could not reach website.");
        }
        return response.json();
    })
    .then(json => console.log(json))
    .catch(err => console.error(err));

Мы начинаем с отправки Получить запросить несуществующий URL на этом API. Обратите внимание на изменение первого тогда () Функция, которая анализирует тело ответа к JSON:

if (!response.ok) {
    throw new Error("Could not reach website.");
}

Мы проверяем Хорошо Собственность, логическое. Это правда Если код состояния HTTP от ответа между 200-299 годов. Используя не Оператор ( ! ), мы можем захватить случаи, когда сервер вернул ошибку HTTP. Если мы получим ошибку HTTP, мы бросаем пользовательскую ошибку, которая закончила бы fetch () цепь обещания.

Если мы не получили ошибку HTTP, мы возвращаем ответ JSON как обещание, как и ранее.

В конце цепочки обещания у нас есть поймать () Функция, которая просто регистрирует ошибку к консоли.

Если вы перезаряжете свой index.html Страница, вы должны увидеть этот консольный выход:

Вывод ошибки, пытаясь достичь поддельного URL

Хорошо сделано, вы охватывали основы Fetch API.

Заключение

PRETCH API обеспечивает обещанный способ отправки HTTP-запросов в JavaScript. Потому что это основано на обещании, разработчики видят это как очиститель для XMLHTTPREQUEST Отказ

С fetch () Функция, мы можем сделать Получить и Пост запросы на разные URL. Мы можем настроить fetch () Запросы на использование любого метода HTTP, который мы хотим использовать.

fetch () Функция также предоставляет ответ Объект, который можно проанализировать в различные форматы. К ним относятся JSON, TEXT и BYTES, чтобы назвать несколько.

Мы также видели, как мы можем обрабатывать ошибки при проведении запросов с fetch () Отказ Помимо положения поймать () Способ в конце цепочки обещания для получения сетевых ошибок, мы также должны проверять код состояния отклика HTTP, который мы получили до анализа его данных.

API Fetch делает внешние API вызовы управляемыми без использования внешних библиотек. Какие API вы планируете получить доступ к fetch () ?

Читайте ещё по теме: