Promise を実装するための詳細な手順

この記事の内容は、Promise の具体的な導入手順について書かれたものであり、ある程度の参考価値はありますので、困っている方は参考にしていただければ幸いです。

1. コンストラクター

まず、Promise には 3 つの状態があることは誰もが知っていますが、便宜上、それを定数として定義します

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

次にクラスを定義します

class MyPromise {
    constructor(executor) {
        //控制状态，使用了一次之后，接下来的都不被使用
        this.state = PENDING;
        this.value = null;
        this.reason = null;
        
        // 定义resolve函数
        const resolve = value => {
            if (this.state === PENDING) {
                this.value = value;
                this.state = FULFILLED;
            }
        }
        
        // 定义reject函数
        const reject = value => {
            if (this.state === PENDING) {
                this.reason = value;
                this.state = REJECTED;
            }
        }
        
        // executor方法可能会抛出异常，需要捕获
        try {
             // 将resolve和reject函数给使用者  
            executor(resolve, reject);
        } catch (error) {
            // 如果在函数中抛出异常则将它注入reject中
            reject(error);
        }
    }
}

これは基本的には理解しやすいので、簡単に説明しましょう

executor: Promise オブジェクトをインスタンス化するときにコンストラクターに渡されるパラメーターです。通常は function(resolve,reject) です。 {}

state: `Promise の状態。最初はデフォルトの保留状態です。resolve メソッドと拒否メソッドが呼び出されるたびに、その値は変更されます。これは後続の then で使用されます`メソッド

値: 解決コールバックが成功した後、解決メソッドのパラメータ値を呼び出します。

理由: 拒否コールバックが成功した後、拒否メソッドのパラメータ値を呼び出します。

resolve: コンストラクターで解決メソッドを宣言し、受信エグゼキューター メソッドを通じてそれを渡し、ユーザーにコールバックします。

reject: コンストラクターで拒否メソッドを宣言し、受信エグゼキューターを通じて渡します。ユーザー

2にコールバックするメソッド、then

thenはPromiseで解決または拒否の結果を取得することです。ここでのthenメソッドには2つのパラメータが必要であることがわかります。コールバックと失敗コールバックのコードです。

then(onFulfilled, onRejected) {
    if (this.state === FULFILLED) {
        onFulfilled(this.value)
    }
    if (this.state === REJECTED) {
        onRejected(this.reason)
    }
}

単純にテストコードを実行してみましょう

const mp = new MyPromise((resolve, reject)=> {
    resolve('******* i love you *******');
})
mp.then((suc)=> {
console.log(11111, suc);
}, (err)=> {
console.log('****** 你不爱我了*******', err)
})

// 11111 '******* i love you *******'

問題なさそうなので、非同期関数を試してみましょうか？

const mp = new MyPromise((resolve, reject)=> {
    setTimeout(()=> {
        resolve('******* i love you *******');
    }, 0)
})
mp.then((suc)=> {
console.log(11111, suc);
}, (err)=> {
console.log('****** 你不爱我了*******', err)
})

何も印刷されないことがわかりますが、何が問題なのでしょうか?非同期の理由により、then を実行すると this.state の値が変化していないため、then での判定が無効になることがわかります。では、どうすれば解決できるのでしょうか？

これは、従来のコールバックに戻ることについてです。ソース コード

// 存放成功回调的函数
this.onFulfilledCallbacks = [];
// 存放失败回调的函数
this.onRejectedCallbacks = [];

const resolve = value => {
    if (this.state === PENDING) {
        this.value = value;
        this.state = FULFILLED;
        this.onFulfilledCallbacks.map(fn => fn());
    }
}

const reject = value => {
    if (this.state === PENDING) {
        this.value = value;
        this.reason = REJECTED;
        this.onRejectedCallbacks.map(fn => fn());
    }
}

に

then(onFulfilled, onRejected) {
    // ... 
    if(this.state === PENDING) {
        this.onFulfilledCallbacks.push(()=> {
            onFulfilled(this.value);
        });
        this.onRejectedCallbacks.push(()=> {
            onRejected(this.value);
        })
    }
}

を追加します。非同期の問題は解決したので、テスト コードを実行してみましょう。結果が出ました。ここで私たちにまだ足りないものは何でしょうか？

チェーン コール

パラメーターを渡さない場合はどうすればよいですか?

これら 2 つのアイデアも非常にシンプルです。 Promise のインスタンスを返すだけです。パラメーターを渡さない場合は、デフォルト値が問題になります。ソース コードを見てみましょう

then(onFulfilled, onRejected) {
    let self = this;
    let promise2 = null;
    //解决onFulfilled,onRejected没有传值的问题
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : y => y
    //因为错误的值要让后面访问到，所以这里也要跑出个错误，不然会在之后then的resolve中捕获
    onRejected = typeof onRejected === 'function' ? onRejected : err => {
        throw err;
    }

    promise2 = new MyPromise((resolve, reject) => {
        if (self.state === PENDING) {
            console.log('then PENDING')
            self.onFulfilledCallbacks.push(() => {
                setTimeout(() => {
                    try {
                        let x = onFulfilled(self.value);
                    console.log(333333, x, typeof x);
                        self.resolvePromise(promise2, x, resolve, reject);
                    } catch (reason) {
                        reject(reason);
                    }
                }, 0)

            });
            self.onRejectedCallbacks.push(() => {
                setTimeout(() => {
                    try {
                        let x = onRejected(self.reason);
                        self.resolvePromise(promise2, x, resolve, reject);
                    } catch (reason) {
                        reject(reason);
                    }
                }, 0);
            });
        }

        if (self.state === FULFILLED) {
            console.log('then FULFILLED')
            setTimeout(() => {
                try {
                    let x = onFulfilled(self.value);
                    self.resolvePromise(promise2, x, resolve, reject);
                } catch (reason) {
                    reject(reason);
                }
            }, 0);
        }

        if (self.state === REJECTED) {
            console.log('then REJECTED')
            setTimeout(() => {
                try {
                    let x = onRejected(self.reason);
                    self.resolvePromise(promise2, x, resolve, reject);
                } catch (reason) {
                    reject(reason);
                }
            })
        }
    });

    return promise2;
}

なぜ setTimeout の層を外側でラップする必要があるのでしょうか? : Promise 自体は非同期メソッドであり、マイクロタスク カテゴリに属しているため、その値は実行スタックが完了した後に取得する必要があるため、すべての戻り値には非同期 setTimeout のレイヤーが含まれている必要があります。

resolvePromise とは何ですか? ：これは実際に公式の Promise/A の要件です。 then は、もちろん Promise オブジェクトを含む任意の関数を返すことができるため、Promise オブジェクトの場合は、Promise オブジェクトでなくなるまで逆アセンブルして値を取得する必要があります。

3.solvePromise

コードを直接見てみましょう

resolvePromise(promise2, x, resolve, reject) {
    let self = this;
    let called = false; // called 防止多次调用
    //因为promise2是上一个promise.then后的返回结果，所以如果相同，会导致下面的.then会是同一个promise2，一直都是，没有尽头
    //相当于promise.then之后return了自己，因为then会等待return后的promise，导致自己等待自己，一直处于等待
    if (promise2 === x) {
        return reject(new TypeError('循环引用'));
    }
    //如果x不是null，是对象或者方法
    if (x !== null && (Object.prototype.toString.call(x) === '[object Object]' || Object.prototype.toString.call(x) === '[object Function]')) {
        // x是对象或者函数
        try {
            let then = x.then;

            if (typeof then === 'function') {
                then.call(x, (y) => {
                    // 别人的Promise的then方法可能设置了getter等，使用called防止多次调用then方法
                    if (called) return;
                    called = true;
                    // 成功值y有可能还是promise或者是具有then方法等，再次resolvePromise，直到成功值为基本类型或者非thenable
                    self.resolvePromise(promise2, y, resolve, reject);
                }, (reason) => {
                    if (called) return;
                    called = true;
                    reject(reason);
                });
            } else {
                if (called) return;
                called = true;
                resolve(x);
            }
        } catch (reason) {
            if (called) return;
            called = true;
            reject(reason);
        }
    } else {
        // x是普通值，直接resolve
        resolve(x);
    }
}

なぜ最初にpromise2とxを判断する必要があるのでしょうか? : まず、Promise/A では、2 つが等しい場合は例外をスローする必要があると書かれています。その理由を説明しましょう。2 つが等しい場合は、次の例を見ることができます。最初の p2 は p1 . then の結果は Promise オブジェクトです。この Promise オブジェクトが作成されたとき、resolvePromise(promise2,x,resolve,reject) 関数が呼び出されました。そして、x はそれ自体に等しく、Promise であるため、then メソッドは再帰する必要がありますPromise オブジェクトではなくなりますが、x(p2) の結果はまだ待機していますが、独自の then メソッドを実行したいため、待機が発生します。

resolvePromise 関数を再帰的に呼び出す必要があるのはなぜですか? : 注意深い人は、私がここで再帰呼び出しメソッドを使用していることに気づいたと思います。第一に、これは Promise/A で必要です。第二に、それはビジネス シナリオの必要性です。そのような Promise の決意に遭遇したとき、Promise の決意は、Promise のまた、解決する Promise がラップされている場合、x が Promise オブジェクトでなくなるまで、値を再帰的に取得する必要があります。

4、catch

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

5、finally

finally メソッドは、最終的な内容に関係なく、それを指定するために使用されます。 Promise オブジェクトの状態は、実行される操作になります。このメソッドは ES2018 で標準的に導入されました。

finally(fn) {
    return this.then(value => {
        fn();
        return value;
    }, reason => {
        fn();
        throw reason;
    });
};

6、resolve/reject

Promise.resolve() と Promise.reject() の 2 つの使用法を誰もが見たことがあると思います。 Promise オブジェクトを返すので、それを実装しましょう。

static resolve(val) {
    return new MyPromise((resolve, reject) => {
        resolve(val)
    })
}
//reject方法
static reject(val) {
    return new MyPromise((resolve, reject) => {
        reject(val)
    })
}

7, all

all メソッドは Promise でよく使われるメソッドと言え、その機能は Promise オブジェクトの配列を配置することです。 . When すべて解決された場合に then メソッドが実行され、リジェクトがあった場合に catch が実行され、それらの結果も配列に順番に並べられるので実装してみましょう。

rreeee

8、レース

race方法虽然不常用，但是在Promise方法中也是一个能用得上的方法，它的作用是将一个Promise数组放入race中，哪个先执行完，race就直接执行完，并从then中取值。我们来实现一下吧。

static race(promiseArr) {
    return new MyPromise((resolve, reject) => {
        promiseArr.forEach(promise => {
            promise.then((value) => {
                resolve(value);
            }, reject);
        });
    });
}

9、deferred

static deferred() {
    let dfd = {};
    dfd.promies = new MyPromise((resolve, reject) => {
        dfd.resolve = resolve;
        dfd.rfeject = reject;
    });
    return dfd;
};

什么作用呢？看下面代码你就知道了

let fs = require('fs')
let MyPromise = require('./MyPromise')
//Promise上的语法糖，为了防止嵌套，方便调用
//坏处 错误处理不方便
function read(){
  let defer = MyPromise.defer()
  fs.readFile('./1.txt','utf8',(err,data)=>{
    if(err)defer.reject(err)
    defer.resolve(data)
  })
  return defer.Promise
}

10、测试

const mp1 = MyPromise.resolve(1);
const mp2 = MyPromise.resolve(2);
const mp3 = MyPromise.resolve(3);
const mp4 = MyPromise.reject(4);

MyPromise.all([mp1, mp2, mp3]).then(x => {
    console.log(x);
}, (err) => {
    console.log('err1', err);
})
MyPromise.race([mp1, mp4, mp2, mp3]).then(x => {
    console.log(x);
}, (err) => {
    console.log('err2', err);
})

var mp = new MyPromise((resolve, reject) => {
    console.log(11111);
    setTimeout(() => {
        resolve(22222);
        console.log(3333);
    }, 1000);
});
mp.then(x => {
    console.log(x);
}, (err) => {
    console.log('err2', err);
})
//11111
//[ 1, 2, 3 ]
//1
//3333
//22222

完整源码请查看

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的的JavaScript教程视频栏目！！！

以上がPromise を実装するための詳細な手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。