1. Need for Promises
When we send a network-request, we have to wait for some time to get response from the server.
But as JavaScript is a synchronous-language, it does not wait to receive a response after some time with normal function call.
Hence, Promises are introduced. Promises gives a promise to code written after it, to provide value after some time.
2. Promise Creation
Promise() constructor is used for Promise creation.
Syntax
new Promise(Executor-Function) // returns "promiseObj"
Executor-Function
should take 'two functions' as parameters -
-
resolve()- called when the asynchronous task completes and returns the 'result' -
reject()- called when task is failed, and returns 'reason of failure' which is typically a 'error object'
const promise1 = new Promise((resolve, reject) => {
// do something asynchronous
//
// resolve(someValue)
// or
// reject('reson for error')
})
Example
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('foo')
}, 300)
})
promise1.then((value) => {
console.log(value); // foo
})
console.log(promise1) // [object Promise]
3. Promise Consumption
const promise1 = new Promise()
const res = promise1.then(res => res.json()).catch(err => console.log(err));
// .then() step after result is received
// .catch() way to process error, if error happened
// Chaining
const res = promise1
.then(value1 => modify1(value1))
.then(value2 => modify2(value2))
.then(value3 => modify3(value3))
.catch(err => console.log(err))
4. Making functions returns a Promise
To provide a function with promise-functionality, have it return a promise-object
function myAsyncFunction(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open("GET", url)
xhr.onload = () => resolve(xhr.responseText)
xhr.onerror = () => reject(xhr.statusText)
xhr.send()
});
}
5. Async Functions
Async Functions are instances of the AsyncFunction constructor, and await keyword is permitted within them.
The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.
try{ } catch(e){ } block is used to process fulfilled (try{}) and failed (catch(e){}) requests
// 1. function returning promise
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
// 2. Async function
async function asyncCall() {
console.log('calling');
try {
const result = await resolveAfter2Seconds();
console.log(result); // fulfilled
} catch(err) {
console.log(err) // rejected, or any other err
}
}
asyncCall(); // expected output: "resolved"
Top comments (0)