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-origin
cache
: modo de cache para solicitaçãocredentials
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();