Promise

作者: 没了提心吊胆的稗子 | 来源:发表于2019-08-13 21:57 被阅读0次

    整体框架

    const PENDING = 'pending'; // 初始态
    const FULFILLED = 'fulfilled';
    const REJECTED = 'rejected';
    function Promise(executor) {
        let _this = this; // 当前Promise实例
        _this.status = PENDING;
        // 定义存放成功的回调函数数组
        _this.onResolvedCallbacks = [];
        // 定义存放失败的回调函数数组
        _this.onRejectedCallbacks = [];
    
        // 此函数执行可能出异常
        // 调用此方法 如果是pending,就可以转为resolve,若是resolve或者reject不处理
        function resolve(value) {}
        function reject(error) {}
        try{
            executor(resolve, reject);
        }catch(e) {
            // 函数执行失败了
            reject(e);
        }
    }
    

    对照官方文档



    实现部分状态改变的部分

    function resolve(value) {
        if(_this.status === PENDING){
            _this.status = FULFILLED;
            _this.value = value;
            // 调用成功的回调
           _this.onResolvedCallbacks.forEach(cb => cb(_this.value));
        }
    }
    function reject(error) {
        if(_this.status === PENDING){
            _this.status = REJECTED;
            _this.value = error; // 失败的原因
            _this.onRejectedCallbacks.forEach(cb => cb(_this.value))
         }
    }
    
    // onFulfilled 是用来接收promise成功的值或者失败的原因
    // 值的穿透
    Promise.prototype.then = function (onFulfilled, onRejected) {
        // 如果成功和失败的回调没有传,表示这个then没有任何逻辑,只会把值往后抛
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected : reason => {throw reason};
    };
    

    then方法 不管成功还是失败状态,都要返回一个promise对象,如果是pending状态的话,依然需要等待状态改变



    // onFulfilled 是用来接收promise成功的值或者失败的原因
    // 值的穿透
    Promise.prototype.then = function (onFulfilled, onRejected) {
        // 如果成功和失败的回调没有传,表示这个then没有任何逻辑,只会把值往后抛
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected : reason => {throw reason};
        // 当前promise状态已经是成功态, onFulfilled直接取传递过来的值
        let _this = this;
        let promise2;
        if(this.status === FULFILLED){
            return promise2 = new Promise(function (resolve, reject) {
                try{
                    let x = onFulfilled(_this.value);
                    // 如果获取到了返回值x,会走解析promise的过程
                    resovlePromise(promise2, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
        }
        if(this.status === REJECTED){
            try{
                let x = onRejected(_this.value);
                resovlePromise(promise2, x, resolve, reject);
            } catch(e) {
                reject(e);
            }
    
        }
        // 如果是pending状态
        if(this.status === PENDING){
    
            _this.onResolvedCallbacks.push(function () {
                try{
                    let x = onFulfilled(_this.value);
                    resovlePromise(promise2, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
            _this.onRejectedCallbacks.push(function () {
                try{
                    let x = onRejected(_this.value);
                    resovlePromise(promise2, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
    
            });
        }
        return new Promise(x);
    };
    

    处理then里面的resolve


    function resovlePromise(promise2, x, resolve, reject) {
        if(promise2 === x){
            throw TypeError("循环调用");
        }
        let called = false; // promise2是否resolved或者reject(状态只能改一次)
        if(x instanceof Promise){
            // x是pending状态的话,promise2就得等待他处理完成
            if(x.status === PENDING){
               x.then(function (y) {
                   resovlePromise(promise2, y, resolve, reject);
               }, reject);
               // 不是pending就把x传递过来的值给promise2
            } else {
                x.then(resolve, reject);
            }
            // x是对象或者函数 只要有then方法就可
        } else if(x !== null && (typeof x === 'object' || typeof x === 'function')){
            try{
                let then = x.then;
                if(typeof then === 'function'){
                    // 当我们的promise和别人的promise进行交互,编写这段代码要考虑到乱写的内容
                    then.call(x, function (y) {
                        // 如果promise2已经成功或失败,就不会再处理
                        if(called){
                            return;
                        }
                        called = true;
                        // 递归调用
                        resovlePromise(promise2, y, resolve, reject);
                    }, function (err) {
                        if(called){
                            return;
                        }
                        called = true;
                        reject(err);
                    });
                } else {
                    // 这一步说明x不是一个thenable对象 直接把他当成值resolve promise2
                    resolve(x);
                }
            }catch (e) {
                if(called){
                    return;
                }
                called = true;
                reject(e);
            }
        } else {
            // 普通值的话就用x去resolve promise2
            resolve(x);
        }
    }
    

    Promise.all/Promise.race

    function gen(times, cb) {
        let result = [], count = 0;
        return function (i, data) {
            result[i] = data;
            if(++count === times){
                cb(result);
            }
        }
    }
    
    // Promise.all 接收一个promise数组, 如果全部完成了promise才会成功
    // 只要有一个失败,那么promise就失败
    Promise.call = function (promises) {
      return new Promise(function (resolve, reject) {
          let done = gen(promises.length, resolve);
          for (let i = 0; i < promises.length; i++) {
              promises[i].then(function (data) {
                  done(i, data);
              }, reject);
          }
      });
    };
    
    // Promise.race 接收一个promise数组, 谁先完成就是谁的状态
    // 不管成功还是失败
    Promise.race = function (promises) {
        return new Promise(function (resolve, reject) {
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(resolve, reject);
            }
        });
    };
    
    Promise.resolve = function (value) {
      return new Promise(function(resolve){
          resolve(value);
      })  
    };
    
    Promise.reject = function (reason) {
        return new Promise(function(resolve, reject){
            reject(reason);
        })
    };
    

    Q一个Promise库,angular.js里面就是用的它,Q的实现原理及用法

    // let Q = require('q');
    let Q = {
        defer() {
            let success, error;
            return {
                resolve(data){
                    success(data);
                },
                reject(error){
                    error(error);
                },
                promise: {
                    then(onfulfilled, onRejected){
                        success = onfulfilled;
                        error = onRejected;
                    }
                }
            }
        }
    };
    
    
    let fs = require('fs');
    function readFlie(filename) {
        let defer = Q.defer();
        fs.readFile(filename, 'utf8', function (err, data) {
            if(err){
                defer.reject(err);
            } else {
                defer.resolve(data)
            }
        });
        return defer.promise;
    }
    readFlie('data.txt').then(function (data) {
        console.log(data);
    });
    

    相关文章

      网友评论

          本文标题:Promise

          本文链接:https://www.haomeiwen.com/subject/bbjbjctx.html