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)