在 Promise 中的代码运行需要一些时间,不能立刻返回结果。例如异步请求,通过网络加载数据等,并且 Promise 代码一旦完成,需要这个 Promise 返回结果的地方,将会第一时间得到返回的结果。
const promise = new Promise((resolve,reject)=>{
resolve(value)
//reject(error)
})
当 new Promise 被创建, 该箭头函数会自动触发,参数 resolve
和 reject
是由 JavaScript 自身提供的回调。如果成功则调用 resolve
,如果出现 error 则调用 reject
promise 的状态:
executor 只能调用一个 resolve
或一个 reject
。任何状态的更改都是最终的。
所以再次调用 resolve
和 reject
的调用都会被忽略。
Promise 对象的 state
和 result
属性都是内部的。我们无法直接访问它们。但我们可以对它们使用 .then
/.catch
/.finally
方法。
.then 方法
拥有两个回调函数,分别访问 promise 中的 result 和错误捕捉 error 的值,
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve("done!"), 1000);
});
// resolve 运行 .then 中的第一个函数
promise.then(
result => alert(result), // 1 秒后显示 "done!"
error => alert(error) // 不运行
);
.catch 方法
访问错误捕捉 error 的值
let promise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("Whoops!")), 1000);
});
// .catch(f) 与 promise.then(null, f) 一样
promise.catch(err=>alert(err)); // 1 秒后显示 "Error: Whoops!"
.finally 方法
无论 promise 被 resolve 还是 reject。finally 方法都会在状态改变的时候执行。
finally
的功能是设置一个处理程序在前面的操作完成后,执行清理/终结。
new Promise((resolve, reject) => {
/* 做一些需要时间的事,之后调用可能会 resolve 也可能会 reject */
})
// 在 promise 为 状态改变 时运行,无论成功与否
.finally(() => stop loading indicator)
// 所以,加载指示器(loading indicator)始终会在我们继续之前停止
.then(result => show result, err => show error)
Promise 的链式调用
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000); // (*)
}).then(function(result) { // (**)
alert(result); // 在1秒后弹出 result
return result * 2; // 将运算结果 返回 promise 的 result
}).then(function(result) { // (***) 访问 promise 的 result
alert(result); // 2 立即弹出
return result * 2; // 将运算结果 返回 promise 的 result
}).then(function(result) { //访问 promise 的 result
alert(result); // 4 立即弹出
return result * 2; // 将运算结果 返回 promise 的 result
});
让每一个 弹出都等待 1 秒钟
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
});
使用 promise 进行错误
.catch
处理 promise 中的各种 error:在 reject()
调用中的,或者在处理程序中抛出的 error。
如果给定 .then
的第二个参数(即 error 处理程序),那么 .then
也会以相同的方式捕获 error。