Получение данных с помощью JavaScript Fetch API

29 декабря, 2021 11:38 дп 1 699 views | Комментариев нет

, | | Комментировать запись

Было время, когда для выполнения запросов API использовался XMLHttpRequest. Он не поддерживал промисов и не создавал чистый код JavaScript. Также можно было использовать jQuery, который предоставляет более чистый синтаксис jQuery.ajax().

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

В этом пошаговом руководстве вы научитесь создавать запросы GET и POST с помощью Fetch API.

Читайте также: Основы Fetch API в JavaScript

Требования

1: Основы синтаксиса Fetch API

Чтобы использовать Fetch API, вызовите метод fetch, который принимает URL-адрес API в качестве параметра:

fetch(url)

После метода fetch() включите метод промиса then():

.then(function() {

})

Метод fetch() возвращает промис. Если он вернул resolve, выполняется функция в методе then(). Эта функция содержит код для обработки данных, полученных от API.

Под методом then() включите метод catch():

.catch(function() {

});

API, который вы вызываете с помощью fetch(), может быть недоступен или при его вызове могут возникнуть ошибки. Если это произойдет, он вернет промис reject. Метод catch используется для обработки reject. Код внутри catch() будет выполнен, если при вызове API по вашему выбору возникнет ошибка.

В итоге базовый код Fetch API будет выглядеть так:

fetch(url)
.then(function() {

})
.catch(function() {

});

Познакомившись с простейшим синтаксисом Fetch API, вы можете перейти к использованию fetch() в реальном API.

2: Получение данных из API через Get-запрос

Следующие примеры кода основаны на Random User API. С помощью этого API можно получить данные десяти пользователей и отобразить их на странице с помощью простейшего JavaScript.

Идея нашего примера состоит в том, чтобы извлечь все данные из Random User API и отобразить их в качестве элементов списка authors. Начнем с создания HTML-файла, в который поместим заголовок и неупорядоченный список с id authors:

<h1>Authors</h1>
<ul id="authors"></ul>

Добавьте теги script в конец HTML-файла и используйте селектор DOM, чтобы захватить ul. Также используйте getElementById с authors в качестве аргумента. Помните, что authors – это идентификатор ранее созданного ul.

<script>

    const ul = document.getElementById('authors');

</script>

После этого создайте постоянную переменную по имени url. Она будет содержать URL-адрес API, который вернет десять случайных пользователей:

const url = 'https://randomuser.me/api/?results=10';

Написав ul и url, мы можем добавить функции, которые будут использоваться для создания элементов списка. Создайте функцию createNode, которая принимает параметр оп имени element:

function createNode(element) {

}

Позже, при вызове createNode, нужно будет передать имя фактического HTML-элемента, который нужно создать.

Внутри функции поместите оператор return, который возвращает элемент, используя document.createElement():

function createNode(element) {
    return document.createElement(element);
}

Также нам понадобится функция по имени append, которая принимает два параметра: parent и el.

function append(parent, el) {

}

Эта функция добавит el к родительскому элементу с помощью document.createElement:

function append(parent, el) {
    return parent.appendChild(el);
}

Функции createNode и append готовы к работе. Используя Fetch API, вызовите Random User API с помощью fetch() и URL-адресом в качестве аргумента:

fetch(url)

Вы получите:

fetch(url)
  .then(function(data) {

    })
  })
  .catch(function(error) {

  });

В приведенном выше коде мы вызвали Fetch API, передали URL-адрес Random User API и получили ответ. Однако полученный ответ – это не JSON, а объект с рядом методов, которые можно использовать в зависимости от того, что вы хотите делать с извлеченной информацией. Чтобы преобразовать возвращаемый объект в JSON, используйте метод json().

Добавим метод then(), который будет содержать функцию с параметром resp:

fetch(url)
.then((resp) => )

Параметр resp принимает значение объекта, возвращенного из fetch(url). Используйте метод json() для преобразования resp  в данные JSON:

fetch(url)
.then((resp) => resp.json())

Данные JSON еще нужно обработать. Давайте добавим еще один оператор then() с функцией, у которой будет аргумент data:

.then(function(data) {

    })
})

В этой функции создайте переменную по имени authors со значением data.results:

.then(function(data) {
    let authors = data.results;

Для каждого автора в списке authors мы создадим элемент списка, который покажет их имя и изображение. Этого можно достичь с помощью метода map():

let authors = data.results;
return authors.map(function(author) {

})

В своей функции map создайте переменную по имени li, которая будет ​​равна createNode с HTML-элементом li в качестве аргумента:

return authors.map(function(author) {
    let li = createNode('li');
})

Повторите этот фрагмент, чтобы создать элемент span и элемент img:

let li = createNode('li');
let img = createNode('img');
let span = createNode('span');

API предлагает имя автора и изображение, которое сопровождает имя. Установите в img.src картинку автора:

let img = createNode('img');
let span = createNode('span');

img.src = author.picture.medium;

Элемент span должен содержать имя и фамилию автора. Свойство innerHTML и интерполяция строк позволят вам добавить эти данные:

img.src = author.picture.medium;
span.innerHTML = `${author.name.first} ${author.name.last}`;

Создав элемент изображения и списка через span, вы можете использовать ранее созданную функцию append для отображения этих элементов на странице:

append(li, img);
append(li, span);
append(ul, li);

После завершения обеих функций then() вы можете добавить catch(). Эта функция будет записывать потенциальную ошибку в консоль:

.catch(function(error) {
  console.log(error);
});

Полный код созданного запроса имеет такой вид:

function createNode(element) {
    return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}

const ul = document.getElementById('authors');
const url = 'https://randomuser.me/api/?results=10';

fetch(url)
.then((resp) => resp.json())
.then(function(data) {
  let authors = data.results;
  return authors.map(function(author) {
    let li = createNode('li');
    let img = createNode('img');
    let span = createNode('span');
    img.src = author.picture.medium;
    span.innerHTML = `${author.name.first} ${author.name.last}`;
    append(li, img);
    append(li, span);
    append(ul, li);
  })
})
.catch(function(error) {
  console.log(error);
});

Только что вы успешно выполнили GET-запрос, используя Random User API и Fetch API. На следующем шаге вы узнаете, как выполнять запросы POST.

3: Обработка POST-запросов

По умолчанию Fetch использует запросы GET, но, конечно, вы можете использовать все другие типы запросов, изменять заголовки и отправлять данные. Для этого нужно установить свой объект и передать его в качестве второго аргумента функции fetch.

Перед созданием POST-запроса создайте данные, которые вы хотите отправить в API. Допустим, это будет объект data с ключом name и значением 8host (при желании укажите другое имя):

const url = 'https://randomuser.me/api';

let data = {
  name: '8host'
}

Обязательно укажите постоянную переменную, которая содержит ссылку на Random User API.

Чтобы создать POST-запрос, нам необходимо указать это явно. Создайте объект fetchData:

let fetchData = {

}

Этот объект должен включать три ключа: method, body и headers. Ключ method должен иметь значение ‘POST’; body должен быть равен только что созданному объекту data; headers должны иметь значение new Headers().

let fetchData = {
  method: 'POST',
  body: data,
  headers: new Headers()
}

Интерфейс Headers – это свойство Fetch API, которое позволяет выполнять различные действия с заголовками HTTP-запросов и ответов.

Читайте также: Определение маршрутов и методов HTTP-запросов в Express

Написав этот код, вы можете выполнить POST-запрос с помощью Fetch API. Включите url и fetchData в качестве аргументов POST-запроса fetch:

fetch(url, fetchData)

Функция then() будет содержать код, который обрабатывает ответ, полученный от сервера Random User API:

fetch(url, fetchData)
.then(function() {
    // Обрабатывает полученный от сервера ответ
});

Вместо создания объекта fetchData вы можете использовать конструктор запроса для создания объекта запроса. Для этого создайте переменную по имени request:

const url = 'https://randomuser.me/api';

let data = {
  name: 'Sara'
}

var request =

Переменная request должна быть равна new Request. Новая конструкция Request принимает два аргумента: URL-адрес API (url) и объект. Объект (как и fetchData) должен включать ключи method, body и headers:

var request = new Request(url, {
    method: 'POST',
    body: data,
    headers: new Headers()
});

Теперь request можно использовать как единственный аргумент для fetch(), поскольку он также включает URL-адрес API:

fetch(request)
.then(function() {
    // обработка ответа, полученного от API
})

В итоге код будет выглядеть так:

const url = 'https://randomuser.me/api';

let data = {
  name: 'Sara'
}

var request = new Request(url, {
    method: 'POST',
    body: data,
    headers: new Headers()
});

fetch(request)
.then(function() {
    // обработка ответа, полученного от API
})

Теперь вы знаете два метода создания и выполнения запросов POST с помощью Fetch API.

Заключение

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

Tags: , ,

Добавить комментарий