(1)Promise Meaning
Promise is a solution for asynchronous programming, an object from which messages of asynchronous operations can be obtained. Simply put, it is a container that stores the results of an event that will end in the future. The
Promise object has the following two features:
(1) The state of the object is not affected by the outside world. There are three states: pending, fulfilled, and rejected. Only the result of asynchronous operation can determine which state it is currently in, and no other operation can change this state. (2) Once the state changes, it will not change again, and you can get this result at any time. There are only two possible ways to change the state of the Promise object: from pending to fulfilled and from pending to rejected.
Promise Disadvantages:
(1) Promise cannot be canceled. Once it is created, it will be executed immediately and cannot be cancelled in the middle. (2) If the callback function is not set, the error thrown by Promise will not be reflected externally. (3) When in the pending state, it is impossible to know which stage it is currently progressing (it has just begun or is about to be completed).
Note: The resolved behind refers to the fulfilled state, not to include rejected state.
(2) Basic usage
ES6 stipulates that the Promise object is a constructor used to generate a Promise instance.
var promise = new Promise(function(resolve, reject) {
// ... some code
if (/* Asynchronous operation succeeds */){
resolve(value);
} else {
reject(error);
}
}
});
Promise constructor accepts a function as a parameter, and the two parameters of this function are resolve and reject. These are two functions, provided by the JavaScript engine, and do not need to be deployed by yourself. The function of the
resolve function is to change the state of the Promise object from "unfinished" to "success" (i.e., from pending to resolved), call it when the asynchronous operation is successful, and pass the result of the asynchronous operation as a parameter; the function of the reject function is to change the state of the Promise object from "unfinished" to "failed" (i.e., from pending to rejected), call it when the asynchronous operation fails, and pass the error reported by the asynchronous operation as a parameter. After the
Promise instance is generated, you can use the then method to specify the callback function of the resolved state and rejected state respectively. The rejected function is optional and does not necessarily need to be provided. Both functions accept the value passed from the Promise object as parameters.
promise.then(function(value) {
// success
}, function(error) {
// failure
});
Note that calling resolve or reject will not terminate the execution of the Promise parameter function.
new Promise((resolve, reject) = {
resolve(1);
console.log(2);
}).then(r = {
console.log(r);
});
// 2
// 1
In the above code, after calling resolve(1), the subsequent console.log(2) will still be executed and will be printed first. This is because the Promise resolved immediately is executed at the end of this event loop, always later than the synchronous task of this loop. After
calls resolve or reject, the mission of Promise is completed. The subsequent operations should be placed in the then method, and should not be written directly behind resolve or reject. So, it is best to prefix them with a return statement so there is no surprise. new Promise((resolve, reject) = { return resolve(1); // The following statement will not execute
console.log(2); })
(3)Promise.prototype.then()
Promise The instance has then method, that is, the then method is defined on the prototype object Promise.prototype. Its function is to add a callback function when the state changes to the Promise instance. The
then method returns a new Promise instance (note that it is not the original Promise instance). Therefore, chain writing can be used, that is, the then method is called after another then method.
getjson("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function funcA(comments) {
console.log("resolved: ", comments);
}, function funcB(err){
console.log("rejected: ", err);
});
In the above code, the callback function specified by the first then method returns another Promise object. At this time, the callback function specified by the second then method will wait for the state of this new Promise object to change. If it becomes resolved, funcA is called, and if the state becomes rejected, funcB is called.
(4)Promise.prototype.catch()
Promise.prototype.catch method is an alias for .then(null, rejection), which is used to specify the callback function when an error occurs.
getJSON('/posts.json').then(function(posts) {
// ...
}).catch(function(error) {
// Handle errors when gettingJSON and the previous callback function run
console.log('Error occurred!', error);
});
In the above code, the getJSON method returns a Promise Object. If the state of the object becomes resolved, the callback function specified by the then method will be called; if an error is thrown by the asynchronous operation, the state will be changed to rejected, and the callback function specified by the catch method will be called to handle this error. In addition, if an error is thrown during operation, the callback function specified by the then method will also be caught by the catch method.
If the Promise state has become resolved, throwing an error is invalid.
var promise = new Promise(function(resolve, reject) {
resolve('ok');
throw new Error('test');
});
promise
.then(function(value) { console.log(value) })
.catch(function(error) { console.log(error) });
// ok
Promise Object errors have a "bubble" nature and will be passed backward until it is captured. That is, the error will always be caught by the next catch statement.
getJSON('/post/1.json').then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// some code
}).catch(function(error) {
// Handle the errors generated by the first three Promises
});
In the above code, there are three Promise objects: one is generated by getJSON and two are generated by then. Any errors thrown by any of them will be caught by the last catch.
Do not define the callback function of the Reject state in the then method (i.e. the second parameter of then), always use the catch method.
// bad
promise
.then(function(data) {
// success
}, function(err) {
// error
});
// good
promise
.then(function(data) { //cb
// success
}).catch(function(err) {
// error
});
In the above code, the second writing method is better than the first writing method, the reason is that the second writing method can catch the errors in the execution of the previous then method and is closer to the synchronous writing method (try/catch). Therefore, it is recommended to always use the catch method instead of using the second parameter of the then method. The difference between
and the traditional try/catch code block is that if the callback function for error handling is not specified using the catch method, the error thrown by the Promise object will not be passed to the outer code, that is, there will be no reaction.
const someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// The following line will report an error because x does not declare
resolve(x + 2);
});
};
};
someAsyncThing().then(function() {
console.log('everything is great');
});
setTimeout(() = { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
// 123
In the above code, there is a syntax error in the Promise object generated by someAsyncThing function.When the browser runs to this line, an error message ReferenceError: x is not defined, but it will not exit the process or terminate the script execution. 123 will still be output after 2 seconds. This means that errors inside Promise will not affect the code outside Promise. In layman's terms, "Promise will eat the error." The
(5)Promise.all()
Promise.all method is used to wrap multiple Promise instances into a new Promise instance. The parameters of the Promise.all method may not be an array, but must have an Iterator interface, and each member returned is a Promise instance.
var p = Promise.all([p1, p2, p3]);
p's state is determined by p1, p2, and p3, and is divided into two situations:
(1) Only when the states of p1, p2, and p3 become fulfilled, the state of p will become fulfilled. At this time, the return values of p1, p2, and p3 form an array and pass it to the callback function of p.
(2) As long as one of p1, p2, and p3 is rejected, the state of p becomes rejected. At this time, the return value of the first rejected instance will be passed to the callback function of p.
// Generate an array of Promise objects
var promises = [2, 3, 5, 7, 11, 13].map(function (id) {
return getJSON('/post/' + id + ".json");
});
Promise.all(promises).then(function (posts) {
// ...
}).catch(function(reason){
// ...
});
In the above code, promises are an array containing 6 Promise instances. Only when the states of these 6 instances become fulfilled, or one of them becomes rejected, will the callback function behind the Promise.all method be called.
Note: If you define the catch method as a parameter as a Promise instance, once it is rejected, the catch method of Promise.all() will not be triggered.
const p1 = new Promise((resolve, reject) = {
resolve('hello');
})
.then(result = result)
.catch(e = e);
const p2 = new Promise((resolve, reject) = {
throw new Error('reported error');
})
.then(result = result)
.catch(e = e);
Promise.all([p1, p2])
.then(result = console.log(result))
.catch(e = console.log(e));
// ["hello", Error: Error]
In the above code, p1 will resolved, p2 will rejected first, but p2 has its own catch method. This method returns a new Promise instance, and p2 actually points to this instance. After the instance has completed the catch method, it will also become resolved, resulting in the two instances in the Promise.all() method parameter being resolved, so the callback function specified by the then method will be called, instead of calling the callback function specified by the catch method.
(6)Promise.race()
Promise.race method also wraps multiple Promise instances into a new Promise instance.
var p = Promise.race([p1, p2, p3]);
In the above code, as long as an instance in p1, p2, and p3 is the first to change the state, the state of p will change as a result. The return value of the Promise instance that was first changed is passed to the callback function of p.
const p = Promise.race([
fetch('/resource-that-may-take-a-while'),
new Promise(function (resolve, reject) {
setTimeout(() = reject(new Error('request timeout')), 5000)
})
]);
p.then(response = console.log(response));
p.catch(error = console.log(error));
In the above code, if the fetch method cannot return the result within 5 seconds, the state of the variable p will become rejected, triggering the callback function specified by the catch method.
(7)Promise.resolve()
Sometimes it is necessary to convert an existing object into a Promise object, and the Promise.resolve method plays this role.
var jsPromise = Promise.resolve($.ajax('/whatever.json')); Promise.resolve method parameters are divided into four situations:
(1) The parameter is a Promise instance. If the parameter is a Promise instance, then Promise.resolve will return this instance without any modifications and is intact.
(2) parameter is a thenable object that refers to an object with the then method, such as the following object.
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value); // 42
});
Promise.resolve method will convert this object into a Promise object, and then execute the then method of the thenable object immediately. After the then method is executed, the state of object p1 becomes resolved, so that the callback function specified by the last method is immediately executed, and the output is 42.
(3) The parameter is not an object with the then method, or is not an object at all. If the parameter is a primitive value, or an object without the then method, the Promise.resolve method returns a new Promise object with the status resolved.
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value); // 42
});
above code generates an instance p of a new Promise object. Since the string Hello does not belong to an asynchronous operation (the method of judging is that the string object does not have the then method), the state of returning the Promise instance is resolved from the time it is generated, so the callback function will be executed immediately. The parameters of the Promise.resolve method will be passed to the callback function at the same time. (4) Without any parameters The Promise.resolve method allows the call to directly return a Promise object with resolved status without parameters. Therefore, if you want to get a Promise object, the more convenient method is to directly call the Promise.resolve method.
var p = Promise.resolve();
p.then(function () {
// ...
});
The variable p in the above code is a Promise object.
Note: The Promise object that resolves immediately is at the end of this round of "event loop", not at the beginning of the next round of "event loop".
setTimeout(function () {
console.log('three');
}, 0);
Promise.resolve().then(function () {
console.log('two');
});
console.log('one');
// one
// two
// three
In the above code, setTimeout(fn, 0) Execute at the beginning of the next round of "event loop", Promise.resolve() executes at the end of this round of "event loop", console.log('one') executes immediately, so output first. The
(8)Promise.reject()
Promise.reject(reason) method will also return a new Promise instance, with the status of the instance rejected.
var p = Promise.reject('Error');
// is equivalent to
var p = new Promise((resolve, reject) = reject('Error'))
p.then(null, function (s) {
console.log(s)
});
// Error
Note: The parameters of the Promise.reject() method will be used as the reason for reject intact and become the parameters of the subsequent method. This is inconsistent with the Promise.resolve method.
const thenable = {
then(resolve, reject) {
reject('Error');
}
};
Promise.reject(thenable).catch(e = {
console.log(e === thenable)
})
// true
In the above code, the parameter of the Promise.reject method is a thenable object. After execution, the parameters of the subsequent catch method are not the "Error" string thrown by reject, but the thenable object.
(9) Two useful additional methods
done()
Promise object callback chain, regardless of ending with the then method or catch method, if the last method throws an error, it may not be caught (because the errors inside Promise will not bubble up the global). Therefore, we can provide a done method that is always at the end of the callback chain, ensuring that any possible errors are thrown.
asyncFunc()
.then(f1)
.catch(r1)
.then(f2)
.done();
// Implementation code of done
Promise.prototype.done = function (onFulfilled, onRejected) {
this.then(onFulfilled, onRejected)
.catch(function (reason) {
// Throw a global error
setTimeout(() = { throw reason }, 0);
});
};
finally()
finally method is used to specify operations that will be performed regardless of the final state of the Promise object. It's the biggest difference from the done method, it accepts a normal callback function as an argument, which must be executed no matter what.
server.listen(0)
.then(function () {
// run test
}).finally(server.stop);
(10)Promise.try()
Since Promise.try provides a unified processing mechanism for all operations, if you want to use the then method to manage the process, it is best to wrap it with Promise.try to better manage exceptions.
const f = () = console.log('now');
Promise.try(f);
console.log('next');
// now
// nexttml2
Promise.try(database.users.get({id: userId}))
.then(...)
.catch(...)
In fact, Promise.try is to simulate a try code block, just like promise.catch simulates a catch code block.
