One place for hosting & domains

      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