根据PromiseA+实现一个自己的promise
步骤一:实现成功和失败的回调方法
首先需要创建一个构造函数 promise
,创建一个 promise
类,在使用时传入了一个执行器 executor
,executor
会传入两个参数:成功(resolve
) 和失败(reject
)。
只要成功,就不会失败,只要失败就不会成功。所以,默认情况下,在调用成功时,就返回成功态,调用失败时,返回失败态。代码如下:
class Promise {
constructor(executor){
//默认状态是等待状态
this.status = 'pending';
this.value = undefined;
this.reason = undefined;
//存放成功的回调
this.onResolvedCallbacks = [];
//存放失败的回调
this.onRejectedCallbacks = [];
let resolve = (data) => { // this指的是实例
if(this.status === 'pending'){
this.value = data;
this.status = 'resolved';
this.onResolvedCallbacks.forEach(fn => fn());
}
}
let reject = (reason) => {
if(this.status === 'pending'){
this.reason = reason;
this.status = 'rejected''
this.onRejectedCallbacks.forEach(fn => fn())
}
}
try{ //执行时可能发生异常
executor(resolve,reject);
}catch (e){
reject(e); //promise 失败了
}
}
}
promise A+ 规定,在有异常错误时,则执行失败函数
步骤二:then 方法链式调用
then
方法是 promise
的最基本方法,返回的是两个回调,一个成功的回调,一个失败的回调,代码如下:
then(onFulFilled,onRejected){
if(this.status === 'resolveed'){ // 成功状态的回调
onFulFilled(this.value)
}
if(this.status === 'rejected'){ // 失败状态的回调
onRejected(this.reason)
}
}
let p = new Promise(function(){
resolve('我是成功');
})
p.then((data) => {console.log(data);}, (err) => {})
p.then((data) => {console.log(data);}, (err) => {})
p.then((data) => {console.log(data);}, (err) => {})
我是成功
我是成功
我是成功
为了实现这样的效果,则上一次的代码要重新写,我们可以把每次调用 resolve
的结果存入一个数组中,每次调用reject
的结果存入一个数组。这就是为什么在上面定义两个数组,且分别在 resolve()
和 reject()
遍历这两个数组的原因。因此,在调用 resolve()
或者 reject()
之前,我们在 pending
状态时,会把多次 then
中的结果存入数组中,上面代码改写为:
then(onFulFilled,onRejected){
if(this.status === 'resolved'){
onFulFilled(this.value;
}
if(this.status === 'rejected'){
onRejected(this.reason);
}
// 当既没有完成 也没有失败
if(this.status === 'pending'){
// 存放成功的回调
this.onResolvedCallbacks.push(() => {
onFulFilled(this.value)
});
// 存放失败的回调
this.onRejectedCallback.push(() => {
onRejected(this.reason);
})
}
}
Promise A+ 规范中规定then可以链式调用
在promise
中,要实现链式调用的结果是返回一个新的promise
,第一次then
中返回的结果,无论成功或失败,都将返回到下一次then
中的成功态中,但第一次then
中如果抛出异常错误,则将返回到下一次then
中的失败态中。
链式调用成功时
链式调用成功会返回值,有多种情况,根据举的例子,大致列出可能会发生的结果。因此将链式调用返回的值单独写入一个方法。方法中传入四个参数,分别是 p2
, x
,resolve
, reject
, p2
指的是上一次返回的 promise
,x 表示运行 promise
返回的结果,resolve
和 reject
是 的方法。
function resolvePromise(p2,x,resolve,reject){ ... }
返回结果不能是自己
var p = new Promise((resolve,reject) => {
return p; // 返回结果不能是自己
})
当返回结果是自己时,永远也不会成功或失败,因此当返回自己时,应抛出一个错误。
function resolvePromise(p2,x,resolve,reject){
if(p2 === x){
return reject(new TypeError('自己引用了自己'))
}
}
返回结果可能是 promise
function resolvePromise(promise2,x,resolve,reject){
// 判断 x 是不是 promise
// 规范中规定:我们允许别人乱写,这个代码可以实现我们的promise和别人的promise进行交互
if(promsie2 === x){ // 不能等待自己完成
return reject(new TypeError('循环引用'))
};
// x 是除了 null 以外的对象或者函数
if(x != null && (typeof x === 'object' || typeof x === 'function')){
let called; //防止成功后调用失败
try{ // 防止取then时出现异常,object.definedProperty
let then = x.then;// 取 x 的 then方法
if(typeof then === 'function'){ //如果then是函数就认为它是promise
//call第一个参数是this,后面的是成功的回调和失败的的回调
then.call(x,y => { // 如果y是promise就继续递归
if(called) return;
called = true;
resolvePromise(promise2,y,resolve,reject)
},r => { // 只要失败了就失败了
if(called) return;
called = true;
reject(r);
});
}else{ // then 是一个普通对象,就直接成功即可
resolve(x);
}
}catch(e){
if(called) return;
called = true;
reject(e);
}
}else{ // x = 123 x 就是一个普通值 作为下一个then成功的参数
resolve(x)
}
}
- 返回结果可能是一个普通值,则直接
resolve(x);
Promise
一次只能调用成功或失败
也就是当调用成功就不能再调用失败了,如果两个都调用的时候,那个先调用就执行哪一个。
根据 Promise A+
的规范原理,promise
在自己的框架中,封装了一系列的内置方法。
- 捕获错误的方法
catch()
- 解析全部方法
all()
- 谁先执行就以谁为准的方法
race()
- 生成一个成功的
promise resolve()
- 生成一个失败的
promise reject()
最后是完整代码:
function resolvePromise(promise2,x,resolve,reject){
//判断x是不是promise
//规范中规定:我们允许别人乱写,这个代码可以实现我们的promise和别人的promise 进行交互
if(promise2 === x){//不能自己等待自己完成
return reject(new TypeError('循环引用'));
};
// x是除了null以外的对象或者函数
if(x !=null && (typeof x === 'object' || typeof x === 'function')){
let called;//防止成功后调用失败
try{//防止取then是出现异常 object.defineProperty
let then = x.then;//取x的then方法 {then:{}}
if(typeof then === 'function'){//如果then是函数就认为他是promise
//call第一个参数是this,后面的是成功的回调和失败的回调
then.call(x,y => {//如果Y是promise就继续递归promise
if(called) return;
called = true;
resolvePromise(promise2,y,resolve,reject)
},r => { //只要失败了就失败了
if(called) return;
called = true;
reject(r);
});
}else{//then是一个普通对象,就直接成功即可
resolve(x);
}
}catch (e){
if(called) return;
called = true;
reject(e)
}
}else{//x = 123 x就是一个普通值 作为下个then成功的参数
resolve(x)
}
}
class Promise {
constructor (executor){
//默认状态是等待状态
this.status = 'panding';
this.value = undefined;
this.reason = undefined;
//存放成功的回调
this.onResolvedCallbacks = [];
//存放失败的回调
this.onRejectedCallbacks = [];
let resolve = (data) => {//this指的是实例
if(this.status === 'pending'){
this.value = data;
this.status = "resolved";
this.onResolvedCallbacks.forEach(fn => fn());
}
}
let reject = (reason) => {
if(this.status === 'pending'){
this.reason = reason;
this.status = 'rejected';
this.onRejectedCallbacks.forEach(fn => fn());
}
}
try{//执行时可能会发生异常
executor(resolve,reject);
}catch (e){
reject(e);//promise失败了
}
}
then(onFuiFilled,onRejected){
//防止值得穿透
onFuiFilled = typeof onFuiFilled === 'function' ? onFuiFilled : y => y;
onRejected = typeof onRejected === 'function' ? onRejected :err => {throw err;}
let promise2;//作为下一次then方法的promise
if(this.status === 'resolved'){
promise2 = new Promise((resolve,reject) => {
setTimeout(() => {
try{
//成功的逻辑 失败的逻辑
let x = onFuiFilled(this.value);
//看x是不是promise 如果是promise取他的结果 作为promise2成功的的结果
//如果返回一个普通值,作为promise2成功的结果
//resolvePromise可以解析x和promise2之间的关系
//在resolvePromise中传入四个参数,第一个是返回的promise,第二个是返回的结果,第三个和第四个分别是resolve()和reject()的方法。
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e);
}
},0)
});
}
if(this.status === 'rejected'){
promise2 = new Promise((resolve,reject) => {
setTimeout(() => {
try{
let x = onRejected(this.reason);
//在resolvePromise中传入四个参数,第一个是返回的promise,第二个是返回的结果,第三个和第四个分别是resolve()和reject()的方法。
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e);
}
},0)
});
}
//当前既没有完成也没有失败
if(this.status === 'pending'){
promise2 = new Promise((resolve,reject) => {
//把成功的函数一个个存放到成功回调函数数组中
this.onResolvedCallbacks.push( () =>{
setTimeout(() => {
try{
let x = onFuiFilled(this.value);
resolvePromise(promise2,x,resolve,reject);
}catch(e){
reject(e);
}
},0)
});
//把失败的函数一个个存放到失败回调函数数组中
this.onRejectedCallbacks.push( ()=>{
setTimeout(() => {
try{
let x = onRejected(this.reason);
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e)
}
},0)
})
})
}
return promise2;//调用then后返回一个新的promise
}
catch (onRejected) {
// catch 方法就是then方法没有成功的简写
return this.then(null, onRejected);
}
}
Promise.all = function (promises) {
//promises是一个promise的数组
return new Promise(function (resolve, reject) {
let arr = []; //arr是最终返回值的结果
let i = 0; // 表示成功了多少次
function processData(index, data) {
arr[index] = data;
if (++i === promises.length) {
resolve(arr);
}
}
for (let i = 0; i < promises.length; i++) {
promises[i].then(function (data) {
processData(i, data)
}, reject)
}
})
}
// 只要有一个promise成功了 就算成功。如果第一个失败了就失败了
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
for (var i = 0; i < promises.length; i++) {
promises[i].then(resolve,reject)
}
})
}
// 生成一个成功的promise
Promise.resolve = function(value){
return new Promise((resolve,reject) => resolve(value);
}
// 生成一个失败的promise
Promise.reject = function(reason){
return new Promise((resolve,reject) => reject(reason));
}
Promise.defer = Promise.deferred = function () {
let dfd = {};
dfd.promise = new Promise( (resolve, reject) => {
dfd.resolve = resolve;
dfd.reject = reject;
});
return dfd
}
module.exports = Promise;