Promise学习

1、Promise是个构造函数，使用new Promise()得到实例对象，接收一个函数作为参数，如：

let p = new Promise((resolve, reject) => {
})

2、Promise有三种状态：pending(进行中)、resolved(成功)、rejected(失败)，状态只会从pending => resolved 或者 pending => rejected，当状态发生改变就会执行对应的回调函数resolve或reject(两者只会执行一个)

let p = new Promise((resolve, reject) => {
	resolve(111)
	reject(222)
})
console.log(p)
// 或
let p1 = new Promise((resolve, reject) => {
	reject(2222)
	resolve(1111)
})
console.log(p1)

输出结果可以看到只会显示一种状态的值

3.1、Promise.prototype.then()方法。接收两个参数(回调函数)，分别用于执行成功或失败的回调函数，回调函数接收的值是resolve或reject传过来的值

let p = new Promise((resolve, reject) => {
	//resolve(1111)
	reject(2222)
})
p.then(value => {
	console.log(value) // 1111
}, reason => {
	console.log(reason)
})

3.2、如果then()返回的还是Promise对象，可以进行链式调用，同时then()可以只接收一个参数（成功时的回调函数）

let p = new Promise((resolve, reject) => {
	// 返回Promise对象
	let result = new Promise((resolve, reject) => {
		resolve(1)
	})
	resolve(result)
})
p.then(value => {
  let val = value + '-----'
	return new Promise((resolve, reject) => {
		resolve(val)
	})
}).then(value => {
	console.log(value)
})
//结果： 1-----

4、Promise.prototype.catch()方法。用于捕获失败的方法

let p = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(1)
	}, 1000)
})
p.then(value => {
	console.log(value + '-1')
	return new Promise((resolve, reject) => {
		resolve(2)
	})
}).then(value => {
	console.log(value + '-2')
}).catch(error => {
	console.log(error + '-3') 
})
// 1s后输出：1-3

5、Promise.resolve()是构造函数的方法，类似于new Promise(resolve => resolve())，返回状态为成功的Promise对象

let p = Promise.resolve(1)
console.log(p)

6、Promise.reject()，返回状态为失败的的Promise对象

Promise.reject('error').catch(e => {
	console.log(e)
})
// 输出： error

7、Promise.all()，接收一个数组，数组里面为Promise实例对象，当所有的实例对象状态都为fulfilled时Promise.all()才返回fulfilled，如果有一个为rejected，则Promise.all()返回rejected

let p1 = new Promise((resolve, reject) => {
	resolve(1)
})
let p2 = Promise.resolve(2)
let p3 = Promise.all([p1, p2])
console.log(p3)
let p4 = Promise.reject('error')
let p5 = Promise.all([p1, p2, p3, p4])
console.log(p5)

8、Promise.race()，同样接收一个数组为参数，数组里面为Promise实例对象，当实例对象中有一个的状态发生改变时就返回

let p1 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve(1)
	}, 1000)
})
let p2 = Promise.resolve(2)
let p3 = Promise.reject('error')
let p4 = Promise.race([p1, p2, p3])
let p5 = Promise.race([p1, p3, p2])
console.log(p4)
console.log(p5)

看得到p4和p5中的p2和p3的顺序不一样，返回值也不一样，谁的状态先发生改变就返回谁

9、Promise代码的实现

class Promise {
 //构造方法
 constructor(executor) {
   //添加属性
   this.PromiseState = 'pending';
   this.PromiseResult = null;
   //声明属性
   this.callbacks = [];
   //保存实例对象的 this 的值
   //resolve 函数
   let resolve = (data) => {
     //判断状态
     if (this.PromiseState !== 'pending') return;
     //1. 修改对象的状态 (promiseState)
     this.PromiseState = 'fulfilled'; // resolved
     //2. 设置对象结果值 (promiseResult)
     this.PromiseResult = data;
     //调用成功的回调函数
     setTimeout(() => {
       this.callbacks.forEach(item => {
         item.onResolved(data);
       });
     });
   }
   //reject 函数
   let reject = (data) => {
     //判断状态
     if (this.PromiseState !== 'pending') return;
     //1. 修改对象的状态 (promiseState)
     this.PromiseState = 'rejected'; // 
     //2. 设置对象结果值 (promiseResult)
     this.PromiseResult = data;
     //执行失败的回调
     setTimeout(() => {
       this.callbacks.forEach(item => {
         item.onRejected(data);
       });
     });
   }
   try {
     //同步调用『执行器函数』
     executor(resolve, reject);
   } catch (e) {
     //修改 promise 对象状态为『失败』
     reject(e);
   }
 }

 //then 方法封装
 then(onResolved, onRejected) {
   //判断回调函数参数
   if (typeof onRejected !== 'function') {
     onRejected = reason => {
       throw reason;
     }
   }
   if (typeof onResolved !== 'function') {
     onResolved = value => value;
     //value => { return value};
   }
   return new Promise((resolve, reject) => {
     //封装函数
     let callback = (type) => {
       try {
         //获取回调函数的执行结果
         let result = type(this.PromiseResult);
         //判断
         if (result instanceof Promise) {
           //如果是 Promise 类型的对象
           result.then(v => {
             resolve(v);
           }, r => {
             reject(r);
           })
         } else {
           //结果的对象状态为『成功』
           resolve(result);
         }
       } catch (e) {
         reject(e);
       }
     }
     //调用回调函数  PromiseState
     if (this.PromiseState === 'fulfilled') {
       setTimeout(() => {
         callback(onResolved);
       });
     }
     if (this.PromiseState === 'rejected') {
       setTimeout(() => {
         callback(onRejected);
       });
     }
     //判断 pending 状态
     if (this.PromiseState === 'pending') {
       //保存回调函数
       this.callbacks.push({
         onResolved: function () {
           callback(onResolved);
         },
         onRejected: function () {
           callback(onRejected);
         }
       });
     }
   })
 }

 //catch 方法
 catch (onRejected) {
   return this.then(undefined, onRejected);
 }

 //添加 resolve 方法
 static resolve(value) {
   //返回promise对象
   return new Promise((resolve, reject) => {
     if (value instanceof Promise) {
       value.then(v => {
         resolve(v);
       }, r => {
         reject(r);
       })
     } else {
       //状态设置为成功
       resolve(value);
     }
   });
 }

 //添加 reject 方法
 static reject(reason) {
   return new Promise((resolve, reject) => {
     reject(reason);
   });
 }

 //添加 all 方法
 static all(promises) {
   //返回结果为promise对象
   return new Promise((resolve, reject) => {
     //声明变量
     let count = 0;
     let arr = [];
     //遍历
     for (let i = 0; i < promises.length; i++) {
       //
       promises[i].then(v => {
         //得知对象的状态是成功
         //每个promise对象 都成功
         count++;
         //将当前promise对象成功的结果 存入到数组中
         arr[i] = v;
         //判断
         if (count === promises.length) {
           //修改状态
           resolve(arr);
         }
       }, r => {
         reject(r);
       });
     }
   });
 }

 //添加 race 方法
 static race(promises) {
   return new Promise((resolve, reject) => {
     for (let i = 0; i < promises.length; i++) {
       promises[i].then(v => {
         //修改返回对象的状态为 『成功』
         resolve(v);
       }, r => {
         //修改返回对象的状态为 『失败』
         reject(r);
       })
     }
   });
 }
}