Como usar a busca para fazer chamadas de rede em JavaScript?
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, PATCHheaders: Objeto de cabeçalhosmode: tal comocors,no-cors,same-origincache: modo de cache para solicitaçãocredentialsbody
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
