Bom dia amigosAo desenvolver aplicativos da Web, geralmente é necessário obter dados do servidor.Hoje existem muitas maneiras de fazer isso no JavaScript.Vamos ver como XMLHttpRequest, Fetch e Axios são usados na prática.As tarefas usarão o JSONPlaceholder - uma API REST online falsa para teste e criação de protótipos (em outras palavras, um banco de dados de treinamento).XMLHttpRequest
Tarefa: obtenha uma lista de usuários e exiba esta lista no console.Decisão:
let xhr = new XMLHttpRequest()
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users')
xhr.send()
xhr.onload = () => xhr.status != 200 ? console.error(xhr.status) : console.table(JSON.parse(xhr.response))
xhr.onprogress = event => {
if (event.lengthComputable) {
console.dir(`received ${event.loaded} of ${event.total} bytes`)
} else {
console.dir(`received ${event.loaded} bytes`)
}
}
xhr.onerror = () => console.error('error')
Resultado:
código no GitHub .Buscar
Tarefa: semelhante.Solução (compare com XMLHttpRequest):fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(json => console.table(json))
.catch(error => console.error(error))
Resultado:
código no GitHub .Ou se você gosta de assíncrono / espera mais:(async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users')
const data = await response.json()
console.table(data)
} catch (error) {
console.error(error)
} finally {
console.log('done')
}
})()
Resultado:
código no GitHub .Vamos complicar um pouco a tarefa: agora você precisa obter imagens do servidor e formar uma galeria a partir delas.Decisão:const url = 'https://jsonplaceholder.typicode.com/photos/'
getPhotosAndMakeGallery(url)
function getPhotosAndMakeGallery(url) {
for (let i = 1; i < 11; i++) {
fetch(url + i)
.then(response => response.json())
.then(photo => {
let img = document.createElement('img')
img.src = photo.url
document.body.append(img)
})
}
}
Resultado:
código no GitHub .Axios
Para conectar esta biblioteca, você precisa adicionar <script src = " unpkg.com/axios/dist/axios.min.js "> </script> no cabeçalho do documento.Tarefa: obtenha a lista de usuários e exiba-a no console.Decisão:axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => console.table(response.data))
.catch(error => console.log(error))
Código do GitHub .Ou se você preferir assíncrono / espera:(async () => {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
console.table(response.data);
} catch (error) {
console.error(error);
}
})()
Código do GitHub .Nós complicamos a tarefa: obter todos e criar uma lista.Decisão:const url = 'https://jsonplaceholder.typicode.com/todos/'
getTodosAndMakeList()
function getTodosAndMakeList() {
const ul = document.createElement('ul')
document.body.append(ul)
for (let i = 1; i < 21; i++) {
axios.get(url + i)
.then(response => {
let li = document.createElement('li')
li.textContent = `title: ${response.data.title}; completed: ${response.data.completed}`
ul.append(li)
})
.catch(error => console.log(error))
}
}
Resultado:
código no GitHub .O que complicamos: obter usuários, comentários e fotos, combinar esses dados e apresentar tudo de forma legível.Decisão:function getUsers(i) {
return axios.get('https://jsonplaceholder.typicode.com/users/' + i)
}
function getComments(i) {
return axios.get('https://jsonplaceholder.typicode.com/comments/' + i)
}
function getPhotos(i) {
return axios.get('https://jsonplaceholder.typicode.com/photos/' + i)
}
(async() => {
for (let i = 1; i < 7; i++) {
let request = await axios.all([getUsers(i), getComments(i), getPhotos(i)])
.then(axios.spread(function(user, comment, photo) {
let figure = document.createElement('figure')
document.body.append(figure)
let figcaption = document.createElement('figcaption')
figcaption.textContent = `Post ${i}`
figure.append(figcaption)
let img = document.createElement('img')
img.src = photo.data.url
figure.append(img)
let userName = document.createElement('p')
userName.innerHTML = `<span>Name:</span> ${user.data.username}`
figure.append(userName)
let userComment = document.createElement('p')
userComment.innerHTML = `<span>Comment:</span> ${comment.data.body}`
figure.append(userComment)
}))
}
})()
Resultado:
código no GitHub .Obrigado pela atenção.