Como usar a busca para fazer chamadas de rede em JavaScript?

Como usar a busca para fazer chamadas de rede em JavaScript?

26 de June, 2020 0 By António César de Andrade
Click to rate this post!
[Total: 0 Average: 0]


Eu compartilharei regularmente pequenos aprendizados sobre JavaScript nesta série. Siga-me enquanto eu aprendo JavaScript. Esta série abordará os fundamentos de JS, navegadores, DOM, design de sistema, arquitetura e estruturas de domínio.

Buscar é uma interface para chamar uma solicitação de rede em JavaScript. É implementado amplamente por navegadores modernos e é usado para chamar uma API.

const promise = fetch(url, [options])

A busca de chamada retorna uma promessa, com o objeto Response. A promessa é rejeitada se houver um erro de rede e resolvida se não houver problemas na conexão com o servidor e o servidor responder com um código de status. Esse código de status pode ser 200, 400 ou 500.

Uma solicitação FETCH de amostra –


fetch(url)
.then(response => response.json())
.catch(err => console.log(err))

A solicitação é enviada como um GET por padrão. Para enviar um POST / PATCH / DELETE / PUT, você pode usar a propriedade method como parte de options parâmetro. Alguns outros valores possíveis options pode levar –

  • method: como GET, POST, PATCH
  • headers: Objeto de cabeçalhos
  • mode: tal como cors, no-cors, same-origin
  • cache: modo de cache para solicitação
  • credentials
  • body

Confira a lista completa de opções disponíveis aqui

Exemplo de uso:
Este exemplo demonstra o uso de busca para chamar uma API e obter uma lista de repositórios git.

const url="https://api.github.com/users/shrutikapoor08/repos";

fetch(url)
  .then(response => response.json())
  .then(repos => {
    const reposList = repos.map(repo => repo.name);
    console.log(reposList);
  })
.catch(err => console.log(err))

Para enviar uma solicitação POST, veja como o parâmetro do método pode ser usado com a sintaxe async / waitit.

const params = {
id: 123
}

const response = await fetch('url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(params)
});

const data = await response.json();

Interessado em mais JSBytes? Assine a newsletter



Fonte