Promsie
通俗来说,Promise就是一个承诺,例如,我承诺明年要赚1百万,then方法中的onFulfilled就是承诺完成后要做的事,onRejected就是承诺失败要做的事情,而Promise构造函数中的resolve用来手动完成这个承诺,reject用来手动让承诺失败
overview
-
构造函数
new Promise((resolve, reject) => {})
-
实例方法(原型对象上的方法)
Promise.prototype.then(onFulfilled, onRejected) Promise.prototype.catch(onRejected)
-
静态方法
Promise.all() Promsie.race() Promsie.resolve() Promsie.reject()
-
状态
- pedding(因为是在等待状态的改变,所以是ing)
- fulfilled(因为是setted,表示已经完成的,所以需要ed)
- rejected(因为是setted,表示已经完成的,所以需要ed)
构造函数
new Promise((resolve, reject) => {
resolve(val)
})
-
接受的参数
接受的参数是一个function,成为executor,promise会往这个executor注入两个函数作为参数
- resolve 当调用resolve,表示的是把Promise的状态从pedding变成fulfilled,那么接下去就会执行then中注册的onFulfilled方法 - reject 当调用reject,表示的是把Promise的状态从pedding变成rejected,那么接下去就会执行then中注册的onRejected方法
-
返回的结果
返回的是一个promise实例,状态是pedding
实例方法(原型对象上的方法)
-
then
then方法接受两个参数,onFulfilled和onRejected,返回的是一个新的Promise实例,例如:
const p = new Promise() p.then(val => val) // 如果p的状态是fulfilled,相当于 Promise.resove(val)
此时的then返回的是一个新的promise对象,如果p的状态是fulfilled,那么then的onFulfilled函数
val => val
就会被执行,然后返回一个状态是fulfilled的promise对象,相当于Promise.resolve(val),这也是then链式调用的关键 -
catch
说到catch,就要说到promise中的错误处理情况,promise内部会捕获错误,主要有三种情形:
``` // 写法一 var promise = new Promise(function(resolve, reject) { try { throw new Error('test'); } catch(e) { reject(e); } }); promise.catch(function(error) { console.log(error); }); // 写法二 var promise = new Promise(function(resolve, reject) { reject(new Error('test')); }); promise.catch(function(error) { console.log(error); }); ``` 1. 同步的错误,在promise发生的错误会被promise捕获,但是不会有反应,因为错误没有被处理,但是在chrome中会抛错 ``` new Promise((resolve, reject) => { throw new Error() // 不会有反应,因为error被捕获但是没有被处理,chrome的实现不同 }) ``` 2. 异步的错误,异步发生的错误不在当前的callstack,当前同步的代码已经执行完,没有发现错误,所以异步的错误无法捕获,会抛错 ``` new Promise((resolve, reject) => { setTimeout(() => { throw new Error() }, 0) }) ``` 3. 使用reject捕获错误,无论异步还是同步的都能捕获,然后交给catch处理,注意错误是会冒泡,所以一般在最后使用catch捕获错误
静态方法
-
Promise.resolve()
接受的参数有三种情况:
1. value 返回一个状态为fulfilled的promise对象,value是传递给onFulfilled的参数 2. promise Promise.resolve(promise)返回的实例会"follow"promise的状态 ``` const p1 = new Promise((resolve, reject) => { setTimeout(() => resolve('hello'), 1000) }) const p2 = new Promise((resolve, reject) => { resolve(p1) }) p2.then(val => console.log(val, 2)) p1.then(val => { console.log(p1) console.log(p2) console.log(val, 1) }) ``` 结果:过1s后,先打印出p1,是一个promise对象,状态是resolved,然后打印p2,状态是pedding,然后打印hello,1,然后打印hello,2 有这样的结果是因为,传递给p2的resove的参数是一个promise,p1,那么p2就会"follow"p1的状态,但当p1的状态改变后,p2的状态才会改变,而且会先执行挂载在p1上回调,然后再执行挂载在p2上的回调函数 3. thenable 在MDN中对Promise.resolve中的介绍中说到,如果参数是一个thenable的对象,也就是拥有then方法的对象,那么Promise.resolve(thanable)返回的Promise实例会"follow"这个thenable对象的状态,简单的来说,就是跟随thenable对象状态的改变而改变 ``` var p = Promise.resolve({ then: (onFulfilled, onRejected) => { setTimeout(onRejected, 1000, new Error()) set } }) p.then(val => console.log(val)).catch(error => console.log(error)) ``` 当then中的onFulfilled方法被调用的时候,表示之前的promise实例的状态是fulfilled,所以then会返回一个新的promise实例,状态是fulfilled,相当于Promise.resolve(val)