Promise

整体框架

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);
});
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,240评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,328评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,182评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,121评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,135评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,093评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,013评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,854评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,295评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,398评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,989评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,705评论 1 56
  • 目录:Promise 的含义基本用法Promise.prototype.then()Promise.prototy...
    BluesCurry阅读 1,494评论 0 8
  • 一、Promise的含义 Promise在JavaScript语言中早有实现,ES6将其写进了语言标准,统一了用法...
    Alex灌汤猫阅读 824评论 0 2
  • //本文内容起初摘抄于 阮一峰 作者的译文,用于记录和学习,建议观者移步于原文 概念: 所谓的Promise,...
    曾经过往阅读 1,237评论 0 7
  • MAFFT:multiple alignment program for amino acid or nucleo...
    Xylona_MS阅读 4,343评论 0 0