¡Buen dia amigos!Al desarrollar aplicaciones web, a menudo es necesario obtener datos del servidor.Hay muchas maneras de hacer esto en JavaScript hoy.Veamos cómo se utilizan XMLHttpRequest, Fetch y Axios en la práctica.Las tareas utilizarán el JSONPlaceholder , una API REST en línea falsa para probar y crear prototipos (en otras palabras, una base de datos de capacitación).XMLHttpRequest
Tarea: obtener una lista de usuarios y mostrar esta lista en la consola.Decisión:
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 en GitHub .Ir a buscar
Tarea: similar.Solución (comparar con XMLHttpRequest):fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(json => console.table(json))
.catch(error => console.error(error))
Resultado:
Código en GitHub .O si te gusta async / espera más:(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 en GitHub .Vamos a complicar un poco la tarea: ahora necesita obtener imágenes del servidor y formar una galería a partir de ellas.Decisión: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 en GitHub .Axios
Para conectar esta biblioteca, debe agregar <script src = " unpkg.com/axios/dist/axios.min.js "> </script> en el encabezado del documento.Tarea: obtener la lista de usuarios y mostrarla en la consola.Decisión:axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => console.table(response.data))
.catch(error => console.log(error))
GitHub
código .O si prefieres asíncrono / espera:(async () => {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
console.table(response.data);
} catch (error) {
console.error(error);
}
})()
GitHub
código .Complicamos la tarea: obtener todos y crear una lista.Decisión: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 en GitHub .Lo complicamos: obtenga usuarios, comentarios y fotos, combine estos datos y presente todo de forma legible.Decisión: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 en GitHub .Gracias por su atención.