Tutorial

Como usar a Fetch API do JavaScript para buscar dados

Published on February 19, 2021
    authorauthor

    Sara Vieira and Ceora Ford

    Português
    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:

    Passo 1 — Começando com a sintaxe da Fetch API

    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.

    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?
     
    2 Comments
    

    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!

    Muito bom.

    Faltou somente falar sobre async/await :/

    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