Consumo de APIs externas e async/await.
{
"nome": "Ana",
"idade": 22,
"ativo": true,
"cursos": ["ADS", "Web"],
"endereco": {
"cidade": "São Paulo",
"estado": "SP"
}
}
Parece um objeto JS, mas as chaves devem usar aspas duplas.
// Objeto JS -> JSON (string)
const obj = { nome: 'Ana', idade: 22 };
const json = JSON.stringify(obj);
// '{"nome":"Ana","idade":22}'
// JSON (string) -> Objeto JS
const texto = '{"nome":"Ana"}';
const dados = JSON.parse(texto);
console.log(dados.nome);
// "Ana"
.json().
console.log('1 - Início');
setTimeout(() => {
console.log('2 - Depois de 2s');
}, 2000);
console.log('3 - Continua');
// Saída: 1, 3, 2
// Uma Promise representa um valor
// que pode estar disponível agora,
// no futuro, ou nunca.
const promessa = new Promise(
(resolve, reject) => {
// Simulando busca de dados
setTimeout(() => {
resolve('Dados prontos!');
}, 1000);
}
);
promessa
.then((dados) => console.log(dados))
.catch((erro) => console.log(erro));
O fetch retorna uma Promise automaticamente.
fetch('https://api.example.com/users')
.then((response) => {
return response.json();
})
.then((dados) => {
console.log(dados);
})
.catch((erro) => {
console.log('Erro:', erro);
});
fetch(url) faz a requisição e retorna uma Promise
.then(res => res.json()) converte a resposta para objeto JS
.then(dados => ...) usa os dados recebidos
.catch(erro => ...) trata erros de rede
async function buscarUsuarios() {
try {
const response = await fetch(
'https://api.example.com/users'
);
const dados = await response.json();
console.log(dados);
} catch (erro) {
console.log('Erro:', erro);
}
}
buscarUsuarios();
async
Marca a função como assíncrona. Permite usar await dentro dela.
await
"Espera" a Promise resolver antes de continuar. O código fica mais legível e sequencial.
try/catch
Trata erros de forma limpa. Substitui o .catch() das Promises.
// API pública: JSONPlaceholder
async function carregarPosts() {
const url =
'https://jsonplaceholder.typicode.com/posts';
const response = await fetch(url);
const posts = await response.json();
const container = document
.querySelector('#posts');
posts.slice(0, 5).forEach((post) => {
const card = document
.createElement('div');
card.className = 'card';
card.innerHTML = `
<h3>${post.title}</h3>
<p>${post.body}</p>
`;
container.appendChild(card);
});
}
carregarPosts();
jsonplaceholder.typicode.com
Posts, usuários, comentários
pokeapi.co/api/v2
Dados de Pokémon
viacep.com.br/ws/{cep}/json
Busca de endereço por CEP
dog.ceo/api/breeds/image/random
Imagens aleatórias de cachorros
async function criarPost() {
const response = await fetch(
'https://api.example.com/posts',
{
method: 'POST',
headers: {
'Content-Type':
'application/json'
},
body: JSON.stringify({
title: 'Meu post',
body: 'Conteúdo...'
})
}
);
const data = await response.json();
console.log(data);
}
GET
Buscar dados (padrão do fetch)
POST
Criar/enviar novos dados
PUT
Atualizar dados existentes
DELETE
Remover dados
async function buscarDados(url) {
try {
const response = await fetch(url);
// fetch nao lança erro para 404/500!
if (!response.ok) {
throw new Error(
`Erro: ${response.status}`
);
}
const dados = await response.json();
return dados;
} catch (erro) {
console.log('Falhou:', erro);
}
}
try/catch em funções asyncresponse.ok antes de processar// Padrão: loading -> dados -> erro
container.innerHTML = 'Carregando...';
const dados = await buscarDados(url);
if (dados) {
container.innerHTML = '...';
} else {
container.innerHTML =
'Erro ao carregar dados.';
}
const inputCep = document
.querySelector('#cep');
const resultado = document
.querySelector('#resultado');
async function buscarCep() {
const cep = inputCep.value
.replace(/\D/g, '');
if (cep.length !== 8) {
resultado.textContent =
'CEP inválido';
return;
}
resultado.textContent =
'Buscando...';
try {
const res = await fetch(
`https://viacep.com.br/ws/${cep}/json/`
);
const data = await res.json();
if (data.erro) {
resultado.textContent =
'CEP nao encontrado';
return;
}
resultado.innerHTML = `
${data.logradouro},
${data.bairro}
- ${data.localidade}/${data.uf}
`;
} catch (erro) {
resultado.textContent =
'Erro na conexão';
}
}
inputCep.addEventListener(
'blur', buscarCep
);
pokeapi.co/api/v2/pokemon/{nome}Projeto prático: App interativa com tudo que aprendemos em JavaScript.