# Como usar JavaScript Fetch para Requisições API

JavaScript `fetch` é uma função integrada que envia requisições API, mantendo o código limpo e organizado. Além da configuração padrão `GET` para solicitação de dados, ela também pode ser utilizada para enviar, alterar e excluir dados.

## O que é e para que serve JavaScript `fetch`?

JavaScript `fetch` é uma função que realiza requisições API com Promises. Esse tipo de interação evita que o código se torne confuso e oferece muitas outras funcionalidades. JavaScript `fetch` envia uma **requisição ao servidor desejado** e a executa em segundo plano. Como funciona e quais possibilidades a API `fetch` oferece, explicaremos nas seções a seguir.

## As vantagens do objeto Promise

Para entender o funcionamento da função JavaScript `fetch`, é necessário conhecer **objetos Promise**. Promises, introduzidos no JavaScript ES6, visam facilitar o **tratamento de operações assíncronas**. Como o nome sugere, um objeto Promise é uma espécie de promessa: se for cumprida, ou seja, se o código funcionar, você receberá um valor. Se a promessa não for cumprida, um objeto de erro será retornado. Como **substituto ou complemento para callbacks**, Promises tornam processos assíncronos mais confiáveis e melhoram a legibilidade do código.

Promises podem ter os estados *pending* (pendente), *fulfilled* (cumprido) ou *rejected* (rejeitado).

- ***pending***: A operação ainda não foi executada nem cancelada.
- ***fulfilled***: A operação foi executada com sucesso.
- ***rejected***: A operação falhou.

Em casos de *fulfilled* e *rejected*, você pode reagir usando métodos como `then()` e `catch()`. JavaScript `fetch` utiliza essas funcionalidades e faz uso de Promises para executar uma requisição XHR a um servidor.

Dica Aproveite o GitHub ao máximo: com o [Deploy Now](https://www.ionos.com/hosting/deploy-now "Deploy Now — IONOS") da IONOS, você pode fazer a implantação de alterações no código diretamente e acompanhar modificações em tempo real. Escolha o plano que melhor atende às suas necessidades!

## Funcionamento de JavaScript `fetch`

A sintaxe básica da função JavaScript `fetch` é rápida de explicar. Ela se parece com isso:

```javascript
fetch()
```

O método pode aceitar dois argumentos. Primeiro, um URL, que deve ser colocado entre aspas dentro dos parênteses. Em segundo lugar, um objeto que não é obrigatório. Ele é adicionado após a instrução principal.

Para ilustrar melhor o funcionamento e a estrutura, utilizamos o seguinte código de exemplo:

```javascript
fetch(url)
.then(function() {
})
.catch(function() {
});
```

No primeiro passo, fornecemos como parâmetro o URL da API teórico. Em seguida, utilizamos o método Promise `then()`, que é complementado por uma função. Esta função será executada quando a Promise retornar a **variável `resolve`**. `resolve` é usado quando uma ação deve ser considerada bem-sucedida. A função de `then()` contém o código necessário para lidar com os dados recebidos da API.

Abaixo, temos o método `catch()` que é chamado quando a **variável `reject`** é retornada. `reject` é retornado quando a API não pode ser acessada ou outros erros ocorrem. Nesse caso, a função dentro de `catch()` é executada. Dessa maneira, com apenas três linhas, você está preparado para todas as situações e pode iniciar requisições API com JavaScript `fetch`.

## Requisições `GET` com JavaScript `fetch`

Você pode usar JavaScript `fetch` para recuperar dados de uma API. No exemplo a seguir, fazemos uma **requisição `GET`**. Este é o **comportamento padrão** de JavaScript `fetch`. Para isso, fornecemos novamente um URL de exemplo. A resposta será retornada como Promise, no qual aplicamos o método `then()`, convertendo a resposta do servidor em um objeto JSON e, em seguida, utilizando novamente o método `then()` para exibir os dados recebidos no console. Um código adequado para essa operação seria:

```javascript
fetch("https://beispielurl.com/api")
.then((response) => response.json())
.then((json) => console.log(json));
```

## Enviar dados com `POST`

Embora a requisição `GET` seja a padrão, você também pode realizar operações **`POST`** com JavaScript `fetch` para **enviar dados**. Novamente, precisamos especificar o URL desejado. Em seguida, usamos a chave `method` para definir o tipo de requisição, que nesse caso é “POST”. Seguem-se duas outras chaves obrigatórias: `body` e `headers`.

A chave `body` define os dados a serem enviados ao servidor. Ela inclui os **parâmetros `title` e `body`**. Também usamos `JSON.stringify` para converter os dados em uma string. `headers` é usado para definir o tipo de dado a ser enviado ao servidor (neste caso JSON) e escolhemos a codificação padrão UTF-8. Ambas as chaves devem ser definidas para uma requisição `POST`. No nosso exemplo, o código seria:

```javascript
fetch("https://beispielurl.com/api", {
method: "POST",
body: JSON.stringify({
title: "Aqui está o título",
body: "Aqui está o conteúdo",
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));
```

## Atualizar objetos com `PUT` ou `PATCH`

Com uma **requisição `PUT` ou `PATCH`**, um objeto pode ser completamente atualizado. Isso também é possível com JavaScript `fetch`. A abordagem é semelhante à do exemplo anterior. Assim, novamente deve haver uma opção `body` com string ou `JSON.stringify`. Também devemos especificar o tipo de conteúdo como `application/json`. No nosso exemplo, o código seria:

```javascript
fetch("https://beispielurl.com/api", {
method: "PUT",
body: JSON.stringify({
title: "Aqui está o título",
body: "Aqui está o conteúdo",
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));
```

Em vez de `PUT`, você pode usar `PATCH`.

## Remover objetos com `DELETE`

Se você deseja usar JavaScript `fetch` para excluir um objeto, uma **requisição `DELETE`** é necessária. Se quiser, você também pode implementar o método `then()` nessa requisição. Um exemplo correspondente seria:

```javascript
fetch("https://beispielurl.com/api", {
method: "DELETE",
})
.then(() => {
element.innerHTML = "Removido com sucesso";
})
.catch((error) => {
console.error('Erro na requisição:', error);
});
```

Dica No nosso Digital Guide, você encontra muitos outros artigos sobre linguagens de programação. Conheça. Por exemplo, os frameworks e bibliotecas mais populares em JavaScript e acesse nosso tutorial que ensina como inserir JavaScript em HTML.


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/javascript-fetch-api/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/javascript-fetch-api/) for AI/LLM consumption.