Linear Flow with Async/Await

Linear Flow

👨‍💼 Let's refactor a Promise chain to use async/await. This will make the code much more readable!

type Recipe = { id: string; title: string }
type Ingredient = { name: string }

async function loadRecipe(id: string): Promise<Recipe> {
	return { id, title: 'Pancakes' }
}

async function loadIngredients(recipeId: string): Promise<Array<Ingredient>> {
	return [{ name: `${recipeId}-flour` }]
}

async function loadCookingData() {
	const recipe = await loadRecipe('r1')
	const ingredients = await loadIngredients(recipe.id)
	return { recipe, ingredients }
}

🐨 Open

index.ts

and:

Refactor loadUserData to use async/await instead of nested .then()
Keep the same return shape: { user, orders }
Await fetchUser(), then await fetchOrders(user.id)
Export loadUserData

Completion check: await loadUserData() returns Alice (id: '1') and an orders array whose first order has userId: '1'.

📜 MDN - async function

02. Async/Await/01. Linear Flow with Async/Await (💪 problem)

Linear Flow with Async/Await