// Tutorial //

Использование JavaScript Fetch API для получения данных

Published on February 19, 2021
    Default avatar
    By Sara Vieira
    Developer and author at DigitalOcean.
    Русский
    Использование JavaScript Fetch API для получения данных

    Введение

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

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

    В этом учебном модуле мы создадим запросы GET и POST, используя Fetch API.

    Предварительные требования

    Для этого обучающего модуля вам потребуется следующее:

    Шаг 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 — Использование Fetch для получения данных от API

    Следующие примеры кода основаны на Random User API. Используя API, вы получаете десять пользователей и выводите их на странице, используя Vanilla JavaScript.

    Идея заключается в том, чтобы получить все данные от Random User API и вывести их в элементах списка внутри списка автора. Для начала следует создать файл HTML и добавить в него заголовок и неупорядоченный список с идентификатором 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, возвращающее element, с помощью document.createElement():

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

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

    function append(parent, el) {
    
    }
    

    Эта функция будет добавлять el к parent, используя 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 с li (элемент HTML) в качестве аргумента:

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

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

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

    Предлагает имя автора и портрет, идущий вместе с именем. Установите в 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 и значением Sammy (или вашим именем):

    const url = 'https://randomuser.me/api';
    
    let data = {
      name: 'Sammy'
    }
    

    Обязательно добавьте постоянную переменную, хранящую ссылку на 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 как аргументы запроса fetch POST:

    fetch(url, fetchData)
    

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

    fetch(url, fetchData)
    .then(function() {
        // Handle response you get from the server
    });
    

    Есть и другая опция, позволяющая создать объект и использовать функцию fetch(). Вместо того, чтобы создавать такой объект как fetchData, вы можете использовать конструктор запросов для создания объекта запроса. Для этого нужно создать переменную с именем request:

    const url = 'https://randomuser.me/api';
    
    let data = {
      name: 'Sara'
    }
    
    var request =
    

    Для переменной request следует задать значение new Request. Конструкт new Request принимает два аргумента: URL API (url) и объект. В объекте также должны содержаться ключи method, body и headers, как и в fetchData:

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

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

    fetch(request)
    .then(function() {
        // Handle response we get from the 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() {
        // Handle response we get from the API
    })
    

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

    Заключение

    Хотя Fetch API поддерживается еще не всеми браузерами, он представляет собой отличную альтернативу XMLHttpRequest. Если вы хотите узнать, как вызывать Web API с помощью React, ознакомьтесь с этой статьей по данной теме.


    Want to learn more? Join the DigitalOcean Community!

    Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

    Sign up
    About the authors
    Default avatar
    Developer and author at DigitalOcean.

    Default avatar
    Developer and author at DigitalOcean.

    Still looking for an answer?

    Was this helpful?
    Leave a comment

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!