Fetch API é a ferramenta de requisições que veio para desbancar de vez o XMLHttpRequest, agora nós podemos fazer requisições sem precisar escrever muitas linhas de código, criar funções para facilitar o uso do XMLHttpRequest ou até mesmo importar outras bibliotecas, como jQuery para usar o $.ajax().
Como fazer o fetch com o JavaScript
Fazer requisições com fetch é muito simples não tem segredo, nós só precisamos passar uma string por parâmetro, que será a nossa url de busca, esse é o único parâmetro obrigatório. O método fetch() retorna uma Promise que retorna uma Response, como, nesse exemplo, queremos recuperar um json então utilizamos o método json(), que é um método que define como o conteúdo do retorno deve ser tratado (veja mais métodos).
fetch("https://pokeapi.co/api/v1/pokemon?limit=20&offset=1")
.then(response => response.json())
(Nesse exemplo usaremos a api https://pokeapi.co/api/v1/, apenas para ilustração)
Podemos inserir também um catch, para que possamos pegar os erros, funciona do mesmo jeito que o then
fetch("https://pokeapi.co/api/v1/pokemon?limit=20&offset=1")
.then(response => response.json())
.catch(error => console.error("Erro:" + error))
Depois, é só escrever o seu código
fetch("https://pokeapi.co/api/v1/pokemon?limit=20&offset=1")
.then(response => response.json())
.catch(error => console.error("Erro:" + error))
.then(response => {
let list = document.getElementById('pokemons');
let listItems = "";
for (let obj in response.objects) {
listItems += `<li>${response.objects[obj].name}</li>`;
}
list.innerHTML = listItems;
});
O fetch aceita também um segundo parâmetro, nele passamos um objeto para configurar a requisição, podemos passar método da requisição, cabeçalho, corpo e etc.
fetch("https://urldarequisicao.com/v1",{
method: /* GET / POST / PUT / DELETE / HEAD */,
headers: /*cabeçalho*/,
body: /*corpo da requisição*/,
referrer: /*referência da requisição*/,
mode: /*cors / no-cors / same-origin*/,
credentials: /*indica se os cookies devem ser enviados junto com a requisição*/,
redirect: /*follow / error / manual*/,
integrity : /*valor de integridade da fonte*/,
cache : /*default / reload / no-cache*/
}).then(response => response.json())
Fontes:
https://www.treinaweb.com.br/blog/requisicoes-ajax-no-javascript-com-a-fetch-api/