One place for hosting & domains

      Cómo usar la API Fetch de JavaScript para obtener datos


      Introducción

      Hubo un tiempo en el que se utilizaba XMLHttpRequest para realizar solicitudes de API. No incluía promesas y no permitía un código JavaScript limpio. Al usar jQuery, se utilizó la sintaxis más limpia con jQuery.ajax().

      Ahora, JavaScript tiene su propia forma integrada de hacer solicitudes de API. Esta es la API Fetch, un nuevo estándar para realizar solicitudes de servidor con promesas, pero incluye muchas otras funciones.

      En este tutorial, creará solicitudes GET y POST usando la API Fetch.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      Paso 1: Introducción a la sintaxis de la API Fetch

      Para usar la API Fetch, invoque el método fetch, que acepta la URL de la API como parámetro:

      fetch(url)
      

      Después del método fetch(), incluya el método de promesa then():

      .then(function() {
      
      })
      

      Con el método fetch() se obtiene una promesa. Si la promesa devuelta es resolve, se ejecuta la función dentro del método then(). Esa función contiene el código para gestionar los datos recibidos de la API.

      Debajo del método then(), incluya el método catch():

      .catch(function() {
      
      });
      

      La API que invocó mediante fetch() puede estar inactiva o pueden producirse otros errores. Si esto sucede, se mostrará la promesa de reject. El método catch se usa para gestionar reject. El código dentro de catch() se ejecutará si se produce un error al invocar la API de su elección.

      Para resumir, usar la API Fetch se verá así:

      fetch(url)
      .then(function() {
      
      })
      .catch(function() {
      
      });
      

      Con un conocimiento sobre la sintaxis para usar la API Fetch, ahora puede continuar usando fetch() en una API verdadera.

      Paso 2: Usar Fetch para obtener datos de una API

      Las siguientes muestras de código se basarán en la API de Random User. Al usar la API, obtendrá diez usuarios y se mostrarán en la página usando Vanilla JavaScript.

      La idea es obtener todos los datos de la API de Random User y mostrarlos en los elementos de la lista dentro de la lista del autor. Primero cree un archivo HTML y añada un encabezado y una lista desordenada con la id de authors:

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

      Ahora, añada las etiquetas script a la parte inferior de su archivo HTML y utilice un selector DOM para capturar la ul. Use getElementById con authors como argumento. Recuerde que authors es el id para la ul creada anteriormente:

      <script>
      
          const ul = document.getElementById('authors');
      
      </script>
      

      Cree una variable constante llamada url que albergará la URL de la API que mostrará diez usuarios al azar:

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

      Habiendo ya establecido ul y url, es momento de crear las funciones que se utilizarán para crear los elementos de la lista. Cree una función llamada createNode que tome un parámetro llamado element:

      function createNode(element) {
      
      }
      

      Más tarde, cuando se invoque createNode, deberá pasar el nombre de un elemento HTML real para crear.

      Dentro de la función, añada la instrucción return que devuelve el elemento usando document.createElement():

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

      También necesitará crear una función llamada append que tome dos parámetros: parent y el:

      function append(parent, el) {
      
      }
      

      Esta función añadirá el a parent usando document.createElement:

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

      Tanto CreateNode como append están listos para funcionar. Ahora usando la API Fetch, invoque la API de Random User usando fetch() con url como argumento:

      fetch(url)
      
      fetch(url)
        .then(function(data) {
      
          })
        })
        .catch(function(error) {
      
        });
      

      En el código anterior, está invocando la API Fetch y pasando la URL a la API de Random User. Luego, se recibe una respuesta. Sin embargo, la respuesta que se obtiene no es JSON, sino un objeto con una serie de métodos que pueden usarse dependiendo de lo que se quiera hacer con la información. Para convertir el objeto devuelto en JSON, utilice el método json().

      Añada el método then() que contendrá una función con un parámetro llamado resp:

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

      El parámetro resp toma el valor del objeto devuelto de fetch(url). Utilice el método json() para convertir resp en datos JSON:

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

      Aún se deben procesar los datos JSON. Añada otra instrucción then() con una función que tiene un argumento llamado data:

      .then(function(data) {
      
          })
      })
      

      Dentro de esta función, cree una variable llamada authors que se establece igual a data.results:

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

      Para cada autor en authors, le convendrá crear un elemento de lista que muestre una imagen de ellos y muestre su nombre. El método map() funciona muy bien para esto:

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

      Con su función de map, cree una variable llamada li que se establecerá igual a createNode con li (el elemento HTML) como argumento:

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

      Repita esto para crear un elemento span y un elemento img:

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

      La API ofrece un nombre para el autor y una imagen que acompaña al nombre. Establezca img.src en la imagen del autor:

      let img = createNode('img');
      let span = createNode('span');
      
      img.src = author.picture.medium;
      

      El elemento span debe contener el primer nombre y el apellido del author. La propiedad innerHTML y la interpolación de cadenas le permitirán hacer esto:

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

      Con la imagen y el elemento de lista ya creados junto con el elemento span, puede usar la función append que se creó anteriormente para mostrar estos elementos en la página:

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

      Una vez que se completan ambas funciones then(), puede añadir la función catch(). Esta función registrará el posible error en la consola:

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

      Este es el código completo de la solicitud que creó:

      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);
      });
      

      Acaba de realizar con éxito una solicitud GET usando la API de Random User y la API Fetch. En el siguiente paso, aprenderá a hacer solicitudes POST.

      Paso 3: Gestionar solicitudes POST

      Fetch se ajusta de manera determinada a las solicitudes GET, pero puede usar todos los demás tipos de solicitudes, cambiar los encabezados y enviar datos. Para ello, debe establecer su objeto y pasarlo como el segundo argumento de la función fetch.

      Antes de crear una solicitud POST, cree los datos que desea enviar a la API. Este será un objeto llamado data con la clave name y el valor Sammy (o su nombre):

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

      Asegúrese de incluir una variable constante que contenga el enlace de la API de Random User.

      Dado que se trata de una solicitud POST, deberá indicarlo de forma explícita. Cree un objeto llamado fetchData:

      let fetchData = {
      
      }
      

      Este objeto debe incluir tres claves: method, body y headers. La clave method debe tener el valor 'POST'. body debe establecerse igual al objeto data que acaba de crear. headers debe tener el valor de new Headers():

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

      La interfaz Headers es una propiedad de la API Fetch, que le permite realizar varias acciones en los encabezados de las solicitudes y respuestas HTTP. Si desea obtener más información sobre esto, este artículo llamado Cómo definir rutas y métodos de solicitud HTTP en Express puede proporcionarle más información.

      Una vez establecido este código, se puede realizar la solicitud POST usando la API Fetch. Incluirá url y fetchData como argumentos para su solicitud POST fetch:

      fetch(url, fetchData)
      

      La función then() incluirá el código que maneja la respuesta recibida del servidor de API de Random User:

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

      Para crear un objeto y usar la función fetch(), también hay otra opción. En vez de crear un objeto como fetchData, puede usar el constructor de solicitudes para crear su objeto de solicitud. Para ello, cree una variable llamada request:

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

      La variable request debe establecerse igual a new Request. La construcción new Request incluye dos argumentos: la url de la API (url) y un objeto. El objeto también debe incluir las claves method, body y headers, así como fetchData:

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

      Ahora, request puede usarse como el único argumento para fetch(), ya que también incluye la URL de API:

      fetch(request)
      .then(function() {
          // Handle response we get from the API
      })
      

      En su totalidad, su código se verá así:

      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
      })
      

      Ahora conoce dos métodos para crear y ejecutar solicitudes POST con la API Fetch.

      Conclusión

      Aunque la API Fetch aún no es compatible con todos los navegadores, es una excelente alternativa a XMLHttpRequest. Si desea aprender a invocar las API web usando React, consulte este artículo sobre ese mismo tema.



      Source link

      Como usar a Fetch API do JavaScript para buscar dados


      Introdução

      Houve um tempo em que o XMLHttpRequest era usado para fazer solicitações de API. Ele não incluía promessas e não gerava um código JavaScript organizado. Ao usar o jQuery, usava-se a sintaxe mais organizada com o jQuery.ajax().

      Agora, o JavaScript tem sua própria maneira integrada de fazer solicitações de API. Isso é feito pela Fetch API, um novo padrão para fazer solicitações de servidor com promessas, que inclui também muitas outras funcionalidades.

      Neste tutorial, você criará solicitações GET e POST usando a Fetch API.

      Pré-requisitos

      Para concluir este tutorial, você precisará do seguinte:

      Para usar a Fetch API, chame o método fetch, que aceita a URL da API como um parâmetro:

      fetch(url)
      

      Após o método fetch(), inclua o método de promessa then():

      .then(function() {
      
      })
      

      O método fetch() retorna uma promessa. Se a promessa retornada for resolve, a função dentro do método then() é executada. Essa função contém o código para lidar com os dados recebidos da API.

      Abaixo do método then(), inclua o método catch():

      .catch(function() {
      
      });
      

      A API chamada usando fetch() pode estar inoperante ou outros erros podem ocorrer. Se isso acontecer, a promessa reject será retornada. O método catch é usado para lidar com reject. O código dentro de catch() será executado se um erro ocorrer ao chamar a API escolhida.

      Resumindo, usar a Fetch API será parecido com isto:

      fetch(url)
      .then(function() {
      
      })
      .catch(function() {
      
      });
      

      Com uma compreensão da sintaxe para usar a Fetch API, agora siga em frente para usar fetch() em uma API real.

      Passo 2 — Usando Fetch para buscar dados de uma API

      As amostras de código a seguir baseiam-se na Random User API. Usando a API, você irá buscar dez usuários e os exibirá na página usando o JavaScript puro.

      A ideia é obter todos os dados da Random User API e exibí-los em itens de lista dentro da lista de autores. Comece criando um arquivo HTML e adicionando um cabeçalho e uma lista não ordenada com o id de authors:

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

      Agora, adicione identificadores script no final do seu arquivo HTML e use um seletor DOM para pegar o ul. Utilize getElementById com authors como o argumento. Lembre-se, authors é o id para o ul criado anteriormente:

      <script>
      
          const ul = document.getElementById('authors');
      
      </script>
      

      Crie uma variável constante chamada url que armazenará o URL da API que irá retornar dez usuários aleatórios:

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

      Com ul e url instalados, é hora de criar as funções que serão usadas para criar os itens de lista. Crie uma função chamada createNode que recebe um parâmetro chamado element:

      function createNode(element) {
      
      }
      

      Mais tarde, quando o createNode for chamado, será necessário passar o nome de um elemento HTML real a ser criado.

      Dentro da função, adicione uma instrução return que retorna o element usando document.createElement():

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

      Também será necessário criar uma função chamada append que recebe dois parâmetros: parent e el:

      function append(parent, el) {
      
      }
      

      Essa função irá acrescentar el ao parent usando o document.createElement:

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

      Tanto o createNode quanto o append estão prontos para o uso. Agora, com a Fetch API, chame a Random User API usando fetch() com url como o argumento:

      fetch(url)
      
      fetch(url)
        .then(function(data) {
      
          })
        })
        .catch(function(error) {
      
        });
      

      No código acima, você está chamando a Fetch API e passando o URL para a Random User API. Então, uma resposta é recebida. No entanto, a resposta recebida não é JSON, mas um objeto com uma série de métodos que podem ser usados dependendo do que você quer fazer com as informações. Para converter o objeto retornado em JSON, use o método json().

      Adicione o método then(), que irá conter uma função com um parâmetro chamado resp:

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

      O parâmetro resp recebe o valor do objeto retornado de fetch(url). Use o método json() para converter resp em dados JSON:

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

      Os dados JSON ainda precisam ser processados. Adicione outra instrução then() com uma função que tem um argumento chamado data:

      .then(function(data) {
      
          })
      })
      

      Dentro dessa função, crie uma variável chamada authors que seja definida igual à data.results:

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

      Para cada autor em authors, será criado um item de lista que exibe uma figura o nome deles. O método map() é ótimo para isso:

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

      Dentro de sua função map, crie uma variável chamada li que será definida igual a createNode com li (o elemento HTML) como o argumento:

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

      Repita isso para criar um elemento span e um elemento img:

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

      A API oferece um nome para o author e uma imagem que acompanha o nome. Defina img.src para a imagem do autor:

      let img = createNode('img');
      let span = createNode('span');
      
      img.src = author.picture.medium;
      

      O elemento span deve conter o primeiro e último nome de author. A propriedade innerHTML e a interpolação de strings permitirão fazer isso:

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

      Com a imagem e o elemento de lista criados juntamente com o elemento span, use a função append criada anteriormente para exibir esses elementos na página:

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

      Com ambas as funções then() concluídas, adicione agora a função catch(). Essa função irá registrar o erro em potencial no console:

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

      Este é o código completo da solicitação que você criou:

      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);
      });
      

      Você acabou de realizar uma solicitação GET com sucesso usando a Random User API e a Fetch API. No próximo passo, irá aprender como realizar solicitações POST.

      Passo 3 — Lidando com solicitações POST

      A Fetch usa por padrão solicitações GET, mas é possível usar qualquer outro tipo de solicitação, alterar os cabeçalhos e enviar os dados. Para fazer isso, é necessário definir seu objeto e passá-lo como o segundo argumento da função fetch.

      Antes de criar uma solicitação POST, crie os dados que gostaria de enviar à API. Este será um objeto chamado data com a chave name e o valor Sammy (ou seu nome):

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

      Certifique-se de incluir uma variável constante que contém o link da Random User API.

      Como esta é uma solicitação POST, será necessário declarar isso explicitamente. Crie um objeto chamado fetchData:

      let fetchData = {
      
      }
      

      Esse objeto precisa incluir três chaves: method, body e headers. A chave method deve conter o valor 'POST'. body deve ser definido igual ao objeto data que acabou de ser criado. headers deve conter o valor de new Headers():

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

      A interface Headers, que é uma propriedade da Fetch API, permite realizar várias ações em cabeçalhos de solicitação HTTP e de resposta. Se quiser aprender mais sobre isso, este artigo chamado Como definir rotas e métodos de solicitação HTTP no Express pode oferecer-lhe mais informações.

      Com esse código no lugar, a solicitação POST pode ser feita usando a Fetch API. Você incluirá url e fetchData como argumentos para sua solicitação POST fetch:

      fetch(url, fetchData)
      

      A função then() irá incluir o código que lida com a resposta recebida do servidor da Random User API:

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

      Para criar um objeto e usar a função fetch(), há também outra opção. Ao invés de criar um objeto como o fetchData, é possível usar o construtor de solicitações para criar seu objeto de solicitação. Para fazer isso, crie uma variável chamada request:

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

      A variável request deve ser definida igual a new Request. O constructo new Request recebe dois argumentos: a url da API (url) e um objeto. O objeto também deve incluir as chaves method, body e headers assim como o fetchData:

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

      Agora, request pode ser usado como o argumento único para o fetch(), uma vez que ele também inclui a url da API:

      fetch(request)
      .then(function() {
          // Handle response we get from the API
      })
      

      No conjunto, seu código ficará semelhante a este:

      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
      })
      

      Agora, você conhece dois métodos para criar e executar solicitações POST com a Fetch API.

      Conclusão

      Embora a Fetch API ainda não seja suportada por todos os navegadores, é uma ótima alternativa ao XMLHttpRequest. Se quiser aprender como chamar APIs da Web usando o React, confira este artigo sobre este tópico.



      Source link

      Использование 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