call-stack----->
basically the function call stack
LIFO
Mechanism js uses to know at what level js is in a function call.
**loupe visualizes call stack
**debugger(inspect-->sources) built in chrome also does that by breakpoints
WebAPIs--->
A Web API (Application Programming Interface)
is a set of rules and protocols that allows different software applications
to communicate with each other over the web.
Think of it as a waiter in a restaurant:
you (the client application) gives an order to the waiter (the Web API),
, and the waiter communicates that order to the kitchen (the server or
database)
and brings back what you requested.
Web APIs use standard web protocols,
primarily HTTP/HTTPS, and common data formats like JSON
and XML to send and receive data.
This makes them platform-agnostic, meaning a mobile app,
a desktop program, and a website can all use the same Web API
to access the same information.
Problem: NESTED CALLBACKS --> ugly and difficult to implement,
used when you need to perform a series of asynchronous operations
in a specific sequence, where each operation depends on the
where each operation depends on the successful completion of the
one before it.
Solution: PROMISES---->
fakeRequestPromise(''yelp.com/page1)
.then((data) => {
console.log("it worked, page 1")
console.log(data)
return fakeRequestPromise(''yelp.com/page2)
})
.then((data) => {
console.log("it worked, page 2")
console.log(data)
return fakeRequestPromise(''yelp.com/page3)
})
.then((data) => {
console.log("it worked, page 3")
console.log(data)
})
.catch(() => {
console.log("OH NO, a req failed")
})
the catch can be a universal one or be put with each then
create our own promises---->
const fakeRequest = (url) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 1000)
})
}
const delayedColorChange = (color, delay) => {
return new Promise((resolve, reject) = {
setTimeout(() => {
document.body.style.backgroundColor = color;
resolve();
}, delay)
})
}
delayedColorChange('red', 1000)
.then(() => delayedColorChange('orange', 1000))
.then(() => delayedColorChange('yellow', 1000))
.then(() => delayedColorChange('green', 1000))
.then(() => delayedColorChange('blue', 1000))
.then(() => delayedColorChange('indigo', 1000))
.then(() => delayedColorChange('violet', 1000))
ASYNC Keyword---->
const sing = async() => {
return 'la la la';
}
const sing = async() => {
throw "error";
return 'la la la';
}
sing().then((data) => {
console.log("promise resolved with", data);
})
.catch((err) => {
console.log("promise rejected with", err);
})
AWAIT KEYWORD--->
waits until promise is resolved
async function rainbow(){
await delayedColorChange('red', 1000)
await delayedColorChange('orange', 1000)
await delayedColorChange('yellow', 1000)
await delayedColorChange('green', 1000)
await delayedColorChange('blue', 1000)
await delayedColorChange('indigo', 1000)
await delayedColorChange('violet', 1000)
return "all done";
}
async function makerequest(){
try{
let data1 = await fakeRequest('/page1');
console.log(data1);
}
catch (e) {
console.log("error");
}
}
