The avatar for @mmakutonin
mmakutonin
Published
IT-280B SP'20
Edited
Feb 12, 2020
Fork of Lesson 8: Advanced Functions II: Promises, Async/Await
•
1 fork
IT-280B SP'20
Lesson 1: Syllabus & Intro to Basic Math:Lesson 2: Variables, Types, and Boolean AlgebraLesson 3: Type Coercion / Conversion, Plus ComparisonsLesson 4: if, for, while, and some functionsLesson 5: Objects and More Function Basics!Lesson 6: Arrays and HTML ProjectLesson 7: Advanced Functions I: Closures, IIFEs, Factory Functions, and ModulesLesson 8: Advanced PrimitivesLesson 9: Application Programming Interfaces (APIs)
Lesson 10: Advanced Functions II: Promises, Async/Await
Lesson 11: Advanced Functions III: Higher Order Functions (HOFs)Lesson 12: Advanced Objects I: PrototypesLesson 13: Advanced Functions IV: Advanced this(Bind, Call, Apply), and Function===ObjectLesson 14: Advanced Objects II: ClassesLesson 4-3 Class InheritanceLesson 16: Advanced Functions 5: Arrow Functions and Default Function Parameters, and functional ...restLesson 17: let and constLesson 18: Review time!Lesson 19: Export/ImportLesson 20: Intro to React, React Native, and Expo (React Day 1)Lesson 21: React Day 2: this.props and React Event HandlingLesson 22: React Day 3: Lifting this.state upLesson 23: ScrumWorkshop #1: UX/UI Best Practices and Trends
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
var romeo = {name: "romeo", hasRose: false}
var juliet = {name: "jules", wantsRose: true}
if(romeo.hasRose===true){
romeo.hasRose=false
juliet.wantsRose=false
return "Happily ever after!"
}
else if(romeo.hasRose===false)
{
return "Romeo fails"
}
romeo.hasRose=true
}
Insert cell
Insert cell
{
var romeo = {name: "romeo", hasRose: false}
var juliet = {name: "jules", wantsRose: true}
if(romeo.hasRose===true){
romeo.hasRose=false
juliet.wantsRose=false
return "Happily ever after!"
}
else if(romeo.hasRose===false)
{
romeo.oweRose=true
juliet.wantsRose=false
}
romeo.hasRose=true
romeo.oweRose=false
romeo.hasRose=false
return "Happily ever after!"
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
promiseFunc = function() {
return new Promise(
function(resolve, reject) {
if(x % 2 === 0) {
return resolve(x)
}
else {
return reject(x)
}
}
)}
Insert cell
finalResult = (promiseFunc())
.then(x => x%3)
.then(x => x+30)
.catch(err => "I encountered an error: " + err + ". Sorry!")
Insert cell
Insert cell
Insert cell
{
var firstThing = 22;
var secondThing = firstThing * 2; //note that the previous line has already resolved before we get here
return secondThing;
}
Insert cell
Insert cell
{
//don't worry about the syntax down here... Assume that all of the functions work
var cocktailList = axios.get(
'https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic'
);
var randomCocktailId = cocktailList.data.drinks[0].idDrink;
var cocktail = axios.get(
'https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=' +
randomCocktailId
);
return cocktail;
}
Insert cell
Insert cell
{
return axios
.get(
'https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic'
)
.then(function(cocktailList) {
return cocktailList.data.drinks[0].idDrink;
})
.then(function(randomCocktailId) {
return axios
.get(
'https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=' +
randomCocktailId
)
.then(function(drink) {
return drink.data.drinks[0];
});
});
}
Insert cell
Insert cell
promiseFunc()
.then()
.then()
.then()
.then()
.catch()
.finally() instanceof Promise
Insert cell
Insert cell
Insert cell
youPromiseToGiveMeFood = function(typeOfFood) {
return new Promise(function(s, f) {
return s(typeOfFood);
});
}
Insert cell
iPromiseToPayYouBack = function(amt, from) {
return new Promise(function(s, f) {
return s(from - amt);
});
}
Insert cell
Insert cell
eatFood = function(myStuff) {
return "I ate the " + myStuff.food
}
Insert cell
checkWhatIHave = function(myStuff) {
return "I have a " + myStuff.food + " and $" + myStuff.wallet + " dollars left."
}
Insert cell
// define the async function
promisedFoodTransaction = async function() {
var myFood;
var myWallet = 100;

// this will return a promise
myFood = youPromiseToGiveMeFood("Lakeview Beef w. Broccoli");
// then it'll keep executing down here

// this will also return a promise
myWallet = /* Promise */ iPromiseToPayYouBack(20, myWallet);

// the promises haven't been resolved, but I'm returning them anyway:
return {
food: myFood,
wallet: myWallet
};
}
Insert cell
Insert cell
promisedFoodTransaction() instanceof Promise
Insert cell
promisedFoodTransaction().then(eatFood)
Insert cell
promisedFoodTransaction().then(checkWhatIHave)
Insert cell
Insert cell
Insert cell
// define the async function
awaitFoodTransaction = async function() {
var myFood;
var myWallet = 100;

// the function will pause at this line below until you give me my food
myFood = await youPromiseToGiveMeFood("Lakeview Beef w. Broccoli");
// then it'll keep executing down here

// and pause until i pay you back
myWallet = await iPromiseToPayYouBack(20, myWallet);

// and now we've finished the transaction
// I return an object containing my belongings
return {
food: myFood,
wallet: myWallet
};
}
Insert cell
awaitFoodTransaction() instanceof Promise
Insert cell
awaitFoodTransaction().then(eatFood)
Insert cell
awaitFoodTransaction().then(checkWhatIHave)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more