Promises Flashcards
What is a Promise
Imagine that you’re a top singer, and fans ask day and night for your upcoming song.
This is a real-life analogy for things we often have in programming:
A “producing code” that does something and takes time. For instance, some code that loads the data over a network. That’s a “singer”.
A “consuming code” that wants the result of the “producing code” once it’s ready. Many functions may need that result. These are the “fans”.
A promise is a special JavaScript object that links the “producing code” and the “consuming code” together.
The “producing code” takes whatever time it needs to produce the promised result, and the “promise” makes that result available to all of the subscribed code when it’s ready.
Structure
let promise = new Promise(function(resolve, reject) {
// executor (the producing code, “singer”)
});
When the executor obtains the result, be it soon or late, doesn’t matter, it should call one of these callbacks:
resolve(value) — if the job is finished successfully, with result value.
reject(error) — if an error has occurred, error is the error object.
The promise object returned by the new Promise constructor has these internal properties:
state — initially “pending”, then changes to either “fulfilled” when resolve is called or “rejected” when reject is called.
result — initially undefined, then changes to value when resolve(value) is called or error when reject(error) is called.
Resolve/Reject
resolve/reject expect only one argument (or none) and will ignore additional arguments.
Error Object
In case something goes wrong, the executor should call reject. That can be done with any type of argument (just like resolve). But it is recommended to use Error objects (or objects that inherit from Error).
Consumers
Consuming functions can be registered (subscribed) using the methods .then and .catch.
Consumer then
promise.then(
function(result) { /* handle a successful result / },
function(error) { / handle an error */ }
);
The first argument of .then is a function that runs when the promise is resolved and receives the result.
The second argument of .then is a function that runs when the promise is rejected and receives the error.
If we’re interested only in successful completions, then we can provide only one function argument to .then:
catch
If we’re interested only in errors, then we can use null as the first argument: .then(null, errorHandlingFunction). Or we can use .catch(errorHandlingFunction), which is exactly the same:
let promise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error(“Whoops!”)), 1000);
});
// .catch(f) is the same as promise.then(null, f)
promise.catch(alert); // shows “Error: Whoops!” after 1 second
finally
The call .finally(f) is similar to .then(f, f) in the sense that f runs always, when the promise is settled: be it resolve or reject.
A finally handler has no arguments. In finally we don’t know whether the promise is successful or not. That’s all right, as our task is usually to perform “general” finalizing procedures.
A finally handler “passes through” the result or error to the next suitable handler.
For instance, here the result is passed through finally to then:
new Promise((resolve, reject) => {
setTimeout(() => resolve(“value”), 2000);
})
.finally(() => alert(“Promise ready”)) // triggers first
.then(result => alert(result)); // <– .then shows “value”
So the finally coming before then does not interfere with the working of then
Promise Chaining
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000); // (*)
}).then(function(result) { // (**)
alert(result); // 1
return result * 2;
}).then(function(result) { // (***)
alert(result); // 2
return result * 2;
}).then(function(result) {
alert(result); // 4
return result * 2;
});
The whole thing works, because every call to a .then returns a new promise, so that we can call the next .then on it.
When a handler returns a value, it becomes the result of that promise, so the next .then is called with it.
then explicitly returning Promise
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000);
}).then(function(result) {
alert(result); // 1
return new Promise((resolve, reject) => { // (*)
setTimeout(() => resolve(result * 2), 1000);
});
}).then(function(result) { // (**)
alert(result); // 2
return new Promise((resolve, reject) => {
setTimeout(() => resolve(result * 2), 1000);
});
}).then(function(result) {
alert(result); // 4
});
async
async makes a function return a Promise.
async function f() {
return 1;
}
f().then(alert);
We could explicitly return a promise, which would be the same:
async function f() {
return Promise.resolve(1);
}
f().then(alert); // 1
await
Works only inside async functions.
When you use await with a Promise, it unwraps the Promise and returns its resolved value.
async function fetchData() {
return “Data received”; // Implicitly returns a resolved Promise
}
async function main() {
let data = await fetchData();
console.log(data); // Output: “Data received”
}
Internally, fetchData() returns a Promise, and await extracts its resolved value.
When async promise is rejected
If the Promise rejects, await throws an error, which must be handled using try…catch:
async function fetchData() {
throw new Error(“Failed to fetch data”);
}
async function main() {
try {
let data = await fetchData(); // This will throw an error
console.log(data);
} catch (error) {
console.log(“Error:”, error.message); // Output: “Error: Failed to fetch data”
}
}
main();
