Promise详解
一、简介
Promise,他是一个对象,是用来处理异步操作的,可以让我们写异步调用的时候写起来更加优雅,更加美观便于阅读。顾名思义为承诺、许诺的意思,意思是使用了Promise之后他肯定会给我们答复,无论成功或者失败都会给我们一个答复,所以我们就不用担心他跑了哈哈。所以,Promise有三种状态:pending(进行中),resolved(完成),rejected(失败)。只有异步返回的结构可以改变其状态。所以,promise的过程一般只有两种:pending->resolved或者pending->rejected。
状态详解:
二、使用promises
1、错误捕获
如果在执行器内部抛出了错误,那么 Promise 的拒绝处理函数就会被调用。例如:
let promise = new Promise(function(resolve, reject) { throw new Error("Explosion!"); }); promise.catch(function(error) { console.log(error.message); // "Explosion!" });
在此代码中,执行器故意抛出了一个错误。此处在每个执行器之内并没有显式的 try-catch
,因此错误就被捕捉并传递给了拒绝处理函数。这个例子等价于:
let promise = new Promise(function(resolve, reject) { try { throw new Error("Explosion!"); } catch (ex) { reject(ex); } }); promise.catch(function(error) { console.log(error.message); // "Explosion!" });
执行器处理程序捕捉了抛出的任何错误,以简化这种常见处理。但在执行器内抛出的错误仅
当存在拒绝处理函数时才会被报告,否则这个错误就会被隐瞒。
2、创建已决的 Promise
基于 Promise 执行器行为的动态本质, Promise 构造器就是创建未决的 Promise 的最好方
式。但若你想让一个 Promise 代表一个已知的值,那么安排一个单纯传值给 resolve() 函数
的作业并没有意义。相反,有两种方法可使用指定值来创建已决的 Promise 。
使用 Promise.resolve()
Promise.resolve() 方法接受单个参数并会返回一个处于完成态的 Promise 。这意味着没有
任何作业调度会发生,并且你需要向 Promise 添加一个或更多的完成处理函数来提取这个参
数值。例如:
let promise = Promise.resolve(42); promise.then(function(value) { console.log(value); // 42 });
此代码创建了一个已完成的 Promise ,因此完成处理函数就接收到 42 作为 value 参数。若
一个拒绝处理函数被添加到此 Promise ,该拒绝处理函数将永不会被调用,因为此 Promise
绝不可能再是拒绝态。
使用 Promise.reject()
你也可以使用 Promise.reject() 方法来创建一个已拒绝的 Promise 。此方法像
Promise.resolve() 一样工作,区别是被创建的 Promise 处于拒绝态,如下:
let promise = Promise.reject(42); promise.catch(function(value) { console.log(value); // 42 });
3、监视多个 Promise
有时你会想监视多个 Promise的进程,以便决定下一步行动。 ES6 提供了能监视多个 Promise 的两个方法:
Promise.all() 与 Promise.race() 。
Promise.all() 方法:
Promise.all() 方法接收单个可迭代对象(如数组)作为参数,并返回一个 Promise 。这个
可迭代对象的元素都是 Promise ,只有在它们都完成后,所返回的 Promise 才会被完成。例
如:
let p1 = new Promise(function(resolve, reject) { resolve(42); }); let p2 = new Promise(function(resolve, reject) { resolve(43); }); let p3 = new Promise(function(resolve, reject) { resolve(44); }); let p4 = Promise.all([p1, p2, p3]); p4.then(function(value) { console.log(Array.isArray(value)); // true console.log(value[0]); // 42 console.log(value[1]); // 43 console.log(value[2]); // 44 });
此处前面的每个 Promise 都用一个数值进行了决议,对 Promise.all() 的调用创建了新的
Promise p4 ,在 p1 、 p2 与 p3 都被完成后, p4 最终会也被完成。传递给 p4 的完
成处理函数的结果是一个包含每个决议值( 42 、 43 与 44 )的数组,这些值的存储顺序保
持了待决议的 Promise 的顺序(与完成的先后顺序无关),因此你可以将结果匹配到每个
Promise 。
若传递给 Promise.all() 的任意 Promise 被拒绝了,那么方法所返回的 Promise 就会立刻被
拒绝,而不必等待其他的 Promise 结束:
let p1 = new Promise(function(resolve, reject) { resolve(42); }); let p2 = new Promise(function(resolve, reject) { reject(43); }); let p3 = new Promise(function(resolve, reject) { resolve(44); }); let p4 = Promise.all([p1, p2, p3]); p4.catch(function(value) { console.log(Array.isArray(value)) // false console.log(value); // 43 });
在此例中, p2 被使用数值 43 进行了拒绝,则 p4 的拒绝处理函数就立刻被调用,而不会
等待 p1 或 p3 结束执行(它们仍然会各自结束执行,只是 p4 不等它们)。
拒绝处理函数总会接收到单个值,而不是一个数组,该值就是被拒绝的 Promise 所返回的拒
绝值。本例中的拒绝处理函数被传入了 43 ,反映了来自 p2 的拒绝。
Promise.race() 方法:
Promise.race() 提供了监视多个 Promise 的一个稍微不同的方法。此方法也接受一个包含需
监视的 Promise 的可迭代对象,并返回一个新的 Promise ,但一旦来源 Promise 中有一个被
解决,所返回的 Promise 就会立刻被解决。与等待所有 Promise 完成的 Promise.all() 方法
不同,在来源 Promise 中任意一个被完成时, Promise.race() 方法所返回的 Promise 就能
作出响应。例如:
let p1 = Promise.resolve(42); let p2 = new Promise(function(resolve, reject) { resolve(43); }); let p3 = new Promise(function(resolve, reject) { resolve(44); }); let p4 = Promise.race([p1, p2, p3]); p4.then(function(value) { console.log(value); // 42 });
在此代码中, p1 被创建为一个已完成的 Promise ,而其他的 Promise 则需要调度作业。
p4 的完成处理函数被使用数值 42 进行了调用,并忽略了其他的 Promise 。传递给
Promise.race() 的 Promise 确实在进行赛跑,看哪一个首先被解决。若胜出的 Promise 是被
完成,则返回的新 Promise 也会被完成;而胜出的 Promise 若是被拒绝,则新 Promise 也会
被拒绝
4、串联 Promise
存在多种方式来将 Promise 串联在一起,以完成更复杂的异步行为。
每次对 then() 或 catch() 的调用实际上创建并返回了另一个 Promise ,仅当前一个
Promise 被完成或拒绝时,后一个 Promise 才会被决议
在 Promise 链中返回值
Promise 链的另一重要方面是能从一个 Promise 传递数据给下一个 Promise 的能力。传递给
执行器中的 resolve() 处理函数的参数,会被传递给对应 Promise 的完成处理函数,这点你
前面已看到过了。你可以指定完成处理函数的返回值,以便沿着一个链继续传递数据。例
如:
let p1 = new Promise(function(resolve, reject) { resolve(42); }); p1.then(function(value) { console.log(value); // "42" return value + 1; }).then(function(value) { console.log(value); // "43" });
p1 的完成处理函数在被执行时返回了 value + 1 。由于 value 的值为 42 (来自执行
器),此完成处理函数就返回了 43 。这个值随后被传递给第二个 Promise 的完成处理函数,
并被其输出到控制台。
在 Promise 链中返回 Promise
从完成或拒绝处理函数中返回一个基本类型值,能够在 Promise 之间传递数据,但若你返回
的是一个对象呢?若该对象是一个 Promise ,那么需要采取一个额外步骤来决定如何处理。
研究以下例子:
let p1 = new Promise(function(resolve, reject) { resolve(42); }); let p2 = new Promise(function(resolve, reject) { resolve(43); }); p1.then(function(value) { // 第一个完成处理函数 console.log(value); // 42 return p2; }).then(function(value) { // 第二个完成处理函数 console.log(value); // 43 });
在此代码中, p1 安排了一个决议 42 的作业, p1 的完成处理函数返回了一个已处于决议
态的 Promise : p2 。由于 p2 已被完成,第二个完成处理函数就被调用了。而若 p2 被
拒绝,会调用拒绝处理函数(如果存在的话),而不调用第二个完成处理函数。