Tutorial

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

Published on February 19, 2021
    authorauthor

    Sara Vieira and Ceora Ford

    Русский
    Использование 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, ознакомьтесь с этой статьей по данной теме.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about our products


    About the authors
    Default avatar
    Sara Vieira

    author



    Still looking for an answer?

    Ask a questionSearch for more help

    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!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Featured on Community

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel