Promises
A
The above allows for JavaScript to step away from the normal synchronous processing order, which is running commands one after the other in the order they are written, and begin processing some of the the code asynchronously. This will allow the browser to move on, and the asynchronous code will be temporarily set aside. For more detail on how JavaScript is processed, read this →.
While setting up a
resolve(param to pass) is a function passed when the promised function is done with its work and has successfully completed its task.
reject(param to pass) is a function passed when the promised function hits and error and was unable to complete.
To return the
A nice article by Dominic Denicola breaks down the responses in a great way. Ultimately, here is what is possible to receive back from a
- states: fulfilled, rejected, pending.
- fates: resolved, unresolved.
.then(function to handle response, function to handle error) can be used when the function is invoked to chain actions together. Once a response is received indicating the program can move on, the next step in the then chain is implemented.
let myVar = new Promise( (resolve, reject) => { ...logic})
NOTE: the names for resolve and reject can be any names, but these two names are general convention. These return functions accordingly.
↓ Examples ↓
function myAsynchFun() {
let promise = new Promise((resolve, reject) => {
// Set up error variable
let error = false;
setTimeout(() => {
console.log('Working Asynchronously')
if (error) {
reject('Error');
} else {
resolve('Work Done');
}
}, 1000)
})
return promise
}
Promise All
Promise.all() will resolve a series of
↓ Example ↓
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'Hello!');
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 'There are many...');
})
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'Promises running...');
})
const promise4 = new Promise((resolve, reject) => {
setTimeout(resolve, 3000, 'and returning together!');
})
Promise.all([promise1, promise2, promise3, promise4]).then(values => {
console.log(values)
});
// RESULT: Promise {< pending >}
// ...after 3 seconds...
// RESULT: (4) ["Hello!", "There are many...", "Promises running...", "and returning together!"]
// 0: "Hello!"
// 1: "There are many..."
// 2: "Promises running..."
// 3: "and returning together!"
// length: 4
// __proto__: Array(0)
////////////////////////
Full Real - World Example
////////////////////////
const urls = [
'https://jsonplaceholder.typicode.com/users',
'https://jsonplaceholder.typicode.com/posts',
'https://jsonplaceholder.typicode.com/albums'
]
Promise.all(urls.map(url => {
return fetch(url).then(resp => resp.json())
})).then(results => {
console.log(results[0]);
console.log(results[1]);
console.log(results[2]);
}).catch(
() => console.log('error')
);
Async-Await Functions
Async functions return a promise. These make code concerning promises easier to read.
async function functName() { ...code await ...code}
↓ Examples ↓
// See the Promises section to see the break-down of the myAsynchFun() function
myAsynchFun().then(
(success) = & gt; console.log(success)
)
.catch(
((error) = & gt; console.log(error)
); // .catch() can be used to catch the error
// RESULT: "Working Asynchronously"
//"Work Done"
////////////////
Another example
////////////////
// Without Async-Await
movePlayer(100, 'left')
.then(() = & gt; movePlayer(400, 'right'))
.then(() = & gt; movePlayer(10, 'right'))
.then(() = & gt; movePlayer(330, 'left'))
// With Async-Await
async function playerStart() {
const firstMove = await movePlayer(100, 'left'); //pause
const secondMove = await movePlayer(100, 'left'); //pause
const thirdMove = await movePlayer(10, 'right'); //pause
const fourthMove = await movePlayer(330, 'left'); //pause
}
////////////////
Another example
////////////////
// Without Async-Await
fetch('https://jsonplaceholder.typicode.com/users')
.then(resp = & gt; resp.json())
.then(console.log)
// With Async-Await
async function fetchUsers() {
const resp = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await resp.json();
console.log(data);
}
fetchUsers();
For-Await-Of Loop
For-await-of loops through promises and returns responses in the correct order.
async function functName() { for await (let request of arrayOfPromises) }
↓ Examples ↓
// Set an array
const theUrls = [
'https://jsonplaceholder.typicode.com/users',
'https://jsonplaceholder.typicode.com/posts',
'https://jsonplaceholder.typicode.com/albums'
]
// A standard for-of loop for refernce
const loopThroughUrls = theUrls => {
for (url of theUrls) {
console.log(url);
}
}
// Now, a for-of-await loop
const getData = async function() {
const arrayOfPromises = theUrls.map(url => fetch(url));
for await (let request of arrayOfPromises) {
const data = await request.json();
console.log(data)
}
}
getData();
// RESULT:Promise {< pending >}
//(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
//(100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
//(100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Managing Asynchronous Ordering
There are times when the order in which code runs, even in an asynchronous environment. There are three common methods: parallel, sequential and race
// This function uses timed delay to order the promises.
const promisify = (item, delay) =>
new Promise((resolve) =>
setTimeout(() =>
resolve(item), delay));
const a = () => promisify('a', 100);
const b = () => promisify('b', 5000);
const c = () => promisify('c', 3000);
// This runs them in parallel, then returns after all have finished.
async function parallel() {
const promises = [a(), b(), c()];
const [output1, output2, output3] = await Promise.all(promises);
return `parallel is done: ${output1} ${output2} ${output3}`
}
// This returns after the first promise is ready
async function race() {
const promises = [a(), b(), c()];
const output1 = await Promise.race(promises);
return `race is done: ${output1}`;
}
// This runs the Promises in a sequence and then returns
async function sequence() {
const output1 = await a();
const output2 = await b();
const output3 = await c();
return `sequence is done ${output1} ${output2} ${output3}`
}
sequence().then(console.log)
parallel().then(console.log)
race().then(console.log)
