Hey ,
I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.
Please upgrade (use this link) access this content.
I'm super eager to help you learn more!
You may find yourself requesting many resources at once. This lesson will show you how to make such requests with Fetch and zlFetch.
We’re going to keep it simple (and conceptual).
Let’s say you want to serve a meal. To serve this meal, you need to fetch three resources. All three resources must be ready before you can serve the meal.
The three resources are:
(Substitute burger, fries and drink with three GitHub requests if you want a real example).
The Promise constructor has a method called all. all takes in an array of promises. It waits for all promises to resolve or reject calling then or catch.
Promise.all([promise1, promise2, promise3])
.then(responses => { /* Do something with the responses */ })
.catch(error => { /* Do something with the errors */})
The argument sent to then or catch is an array from each promise.
Promise.all([promise1, promise2, promise3])
.then([response1, response2, response3] => {
// Do something with each result
})
Here’s what our code might look like if we use promises to fetch burger, fries and drink.
const burgerPromise = getBurger()
const friesPromise = getFries()
const drinkPromise = getDrink()
const serveMeal = Promise.all([
burgerPromise,
friesPromise,
drinkPromise
])
.then([burger, fries, drink] => {
console.log(`${burger} 🍔`)
console.log(`${fries} 🍟`)
console.log(`${drink} 🍹`)
})
You have two ways to fetch burger, fries and drink with Fetch.
The first method is to call three Fetch requests with Promise.all.
In the first then call, you need to transform each response into JSON. Since response.json returns a promise, you need to use another Promise.all.
const burgerPromise = fetch('burger link')
const friesPromise = fetch('fries link')
const drinkPromise = fetch('drink link')
Promise.all([
burgerPromise,
friesPromise,
drinkPromise
])
.then(([burgerResponse, friesResponse, drinkResponse]) => {
return Promise.all([
burgerResponse.json(),
friesResponse.json(),
drinkResponse.json()
])
})
.then(([burger, fries, drink]) => {
console.log(`${burger} 🍔`)
console.log(`${fries} 🍟`)
console.log(`${drink} 🍹`)
})
The second method is to make the first then calls when requesting each resource.
Then, use Promise.all to handle the responses. Each Fetch request will resolves their first then call when they’re ready.
const burgerPromise = fetch('burger link')
.then(r => r.json())
const friesPromise = fetch('fries link')
.then(r => r.json())
const drinkPromise = fetch('drink link')
.then(r => r.json())
Promise.all([
burgerPromise,
friesPromise,
drinkPromise
])
.then(([burger, fries, drink]) => {
console.log(`${burger} 🍔`)
console.log(`${fries} 🍟`)
console.log(`${drink} 🍹`)
})
zlFetch writes the first then call for you. This means that you’ll use method 2 automatically. However, zlFetch stores the response body inside the body property. So you’ll need to use this property to obtain the data.
Promise.all([
zlFetch('burger link'),
zlFetch('fries link'),
zlFetch('drink link')
])
.then(([burgerResponse, friesResponse, drinkResponse]) => {
console.log(`${burgerResponse.body} 🍔`)
console.log(`${friesResponse.body} 🍟`)
console.log(`${drinkResponse.body} 🍹`)
})
Do this: