snippetjavascriptTip
What are promises in JavaScript? In which states can a promise be?
Viewed 0 times
javascriptwhatstateswhichcanpromisesarepromise
Problem
The
The tricky part about promises is understanding that the resulting value may not initially be available. Instead, the promise can be in one of three states:
Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. A common example of using promises would be fetching data from a URL. This would create a Promise object that represents the data we expect to receive. For example:The tricky part about promises is understanding that the resulting value may not initially be available. Instead, the promise can be in one of three states:
- Pending: initial state, neither fulfilled nor rejected.
- Fulfilled: meaning that the operation was completed successfully.
- Rejected: meaning that the operation failed.
Solution
fetch('https://my.api.com/items/1')
.catch(err => console.log(`Failed with error: ${err}`))
.then(response => response.json())
.then(json => console.log(json));- Pending: initial state, neither fulfilled nor rejected.
- Fulfilled: meaning that the operation was completed successfully.
- Rejected: meaning that the operation failed.
A pending
Promise can either be fulfilled with a value or rejected with a reason (error). When either of these happens, the associated handlers (Promise.prototype.then(), Promise.prototype.catch()) are called.In the previous example, the
Promise starts in a pending state, until a response from the server is received. If anything goes wrong during that time, the Promise will be rejected and the Promise.prototype.catch() handler will log the error to the console. Otherwise, the Promise will be fulfilled and the first Promise.prototype.then() handler will execute, returning itself a new Promise. The new promise will be fulfilled and call the second Promise.prototype.then() handler to log the parsed JSON data to the console.Code Snippets
fetch('https://my.api.com/items/1')
.catch(err => console.log(`Failed with error: ${err}`))
.then(response => response.json())
.then(json => console.log(json));Context
From 30-seconds-of-code: promises
Revisions (0)
No revisions yet.