Использование fetch для отправки HTTP-запросов в JavaScript

2 min


Вступление

JavaScript API Fetch позволяет нам отправлять HTTP-запросы. Это была стандартная часть JavaScript, так как ECMAScript 2015 (широко известный как ES6) был представлен и использует обещания.

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

Настроить

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

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





    
    
    
    JavaScript HTTP-запросы



    



Мы изменим script тег, когда мы изучаем новые темы, но остальная часть HTML останется прежним.

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

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

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

Запросы с XMLHttpRequest

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

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

Этот новый файл JavaScript создаст объект XHR и отправит GET запрос к 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 объект. Затем мы использовали open() метод для создания нового HTTP-запроса. Первый аргумент open() HTTP-метод запроса – в этом случае мы отправляем GET запрос. Второй аргумент – это URL с ресурсом сервера, который мы хотим. Затем мы используем send() способ отправки запроса.

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

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

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

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

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

Fetch API

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

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

Отправка запросов с помощью Fetch

Fetch API может сделать GET, POST, PUT, PATCH, DELETE и другие виды HTTP-запросов, Мы сосредоточимся на двух наиболее распространенных методах, используемых в HTTP-запросах: GET и POST,

ПОЛУЧИТЬ запросы

Давайте использовать Fetch API, чтобы сделать GET запросить https://jsonplaceholder.typicode.com/posts/1 как мы сделали с XMLHttpRequest ранее.

В твоем index.html файл, измените script тег для ссылки на новый файл JavaScript:


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

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

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

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

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

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

Вывод JSON запроса на выборку для сообщений в блоге

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

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

POST-запросы

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

Давайте использовать fetch() загрузить данные JSON в POST запрос на макет API. В твоем index.html файл, измените script тег для ссылки на новый файл JavaScript:


Теперь создайте fetchPost.js в вашем рабочем пространстве, чтобы мы могли сделать POST запрос к API, который будет загружать новый элемент списка дел в виде объекта JSON. Введите код ниже в fetchPost.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.

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

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

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

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

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

Обработка ответов с помощью Fetch

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

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

  • text(): Возвращает ответ в виде строковых данных
  • blob()Возвращает ответ в виде объекта blob (двоичные данные вместе с их кодировкой)
  • formData(): Вернуть ответ как FormData объект (который хранит пары ключ-значение строковых данных)
  • arrayBuffer(): Вернуть ответ как ArrayBuffer (низкоуровневое представление двоичных данных)

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

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

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

Как и с любым другим обещанием, fetch() ошибки обрабатываются в catch() метод, который находится в конце цепочки обещаний. Однако catch() функция используется только если fetch() Не удалось отправить запрос. Обычно это означает, что произошла ошибка сети.

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

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

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

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

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

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

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


Теперь в вашем рабочем пространстве создайте новый fetchError.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));

Мы начинаем с отправки GET запрос к несуществующему URL на этом API. Обратите внимание на изменение в первом then() функция, которая анализирует тело ответа в JSON:

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

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

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

В конце цепочки обещаний у нас есть catch() функция, которая просто записывает ошибку на консоль.

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

Вывод ошибки при попытке получить поддельный URL

Отлично, вы рассмотрели основы API Fetch.

Вывод

Fetch API обеспечивает способ отправки HTTP-запросов в JavaScript на основе обещаний. Поскольку он основан на обещаниях, разработчики видят в нем более чистую замену XMLHttpRequest,

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

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

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

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


0 Comments

Ваш адрес email не будет опубликован. Обязательные поля помечены *