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