One place for hosting & domains

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



      Source link