你不知道的JS读书笔记——Promise

Promise这一章的顺序对于未接触过使用过Promise的童鞋而言略抽象了,前边几章主要为了说明Promise和之前的异步方式相比有什么优势和它能解决什么问题,后边才详解Promise的API设计和各种场景下如何使用Promise

建议先了解和简单使用过Promise后再阅读,效果更佳

正文

3.1 什么是Promise

之前的方式:

  • 利用回调函数封装程序中的continuation
  • 回调交给第三方
  • 第三方调用回调
  • 实现正确功能

Promise方式:
第三方提供了解其任务何时结束的能力

Promise的异步特性是基于任务的(图示如下)


任务队列.png

一种处理异步的思路:为了统一现在和将来,把它们都变成将来,即所有操作都成了异步的

书中关于Promise是个啥的观点:

一种封装和组合未来值的易于复用的机制
一种在异步任务中作为两个或更多步骤的流程控制机制,时序上的this-then-that —— 关注点分离

Promise设计的重要基础

  • Promise一定是异步执行的,即使是立即完成的Promise(类似 new Promise((resolve)=>{ resolve(42) })),也无法被同步观察到
  • 一旦Promise决议,它就永远保持在这个状态,变成了不变值(immuatable value),这是设计中最基础和最重要的因素
  • Promise至多只能有一个决议值(一个!一个!一个!)

引申:

  • Promise的决议结果可以给多方多次查看
  • 安全、可靠

3.2 Promise的检测

基于thenable的鸭子类型

if(
  p !== null && 
  (
    typeof p === 'object' ||
    typeof p === 'function'
  ) && 
  typeof p.then === 'function'
) {
  // 假定这是一个thenable
}
else {
  // 不是thenable
}

这种方式显然是有些问题的,但是目前通用的方式

3.3 Promise如何解决信任问题

信任问题见 异步篇

3.3.1 调用过早

避免Zalgo这类副作用:一个任务有时同步完成,有时异步完成,可能导致竞态条件

Promise从定义上保证了不会存在这种问题:参考3.1 设计基础 — 即使是立即完成的Promise,也无法被同步观察到

3.3.2 调用过晚

Note: 调用过晚强调的是调用顺序?

Promise创建对象调用resolve(..)或reject(..)时,这个Promise的then注册的观察回调就会自动调度(注意是被调度而不是执行) —— 在下一个异步时机点上依次被调用执行,它们相互之间是不会互相影响或延误的

3.3.3 回调未调用

Promise一旦决议则一定会通知决议(传入then的完成回调或拒绝回调调用),即使是Javascript运行错误也会调用拒绝回调

如果某个Promise一直不决议呢?使用竞态的高级抽象机制:

// 超时工具
function timeoutPromise(delay){
  return new Promise( (resolve, reject) => {
    setTimeout( function () {
      reject('Timeout!');
    }, delay);
  } )
}

// 设置某个Promise foo()超时
Promise.race( [
  foo(),
  timeoutPromise(3000)
] )
.then(
  function () {
    // foo(..)及时完成
  },
  function (err) {
    // foo(..)被拒绝或者超时
    // 通过查看err确定错误情况
  }
);

3.3.4 调用次数过少或过多

如果创建Promise的代码试图多次调用resolve(..)或reject(..),或者两者都调用,Promise只会接受第一次决议,后续调用都会被忽略

3.3.5 未能传递参数/环境值

Promise至多只能有一个决议值

如果使用多个参数调用resolve(..)或reject(..),第一个参数之后的所有参数都会被忽略

Promise其实也是传入回调函数,故函数中照样能根据作用域规则访问到对应的环境数据

3.3.6 吞掉错误或异常

这里说的错误或异常可能出现在两个过程:

  1. Promise创建过程或其决议确认之前的任何时间点上(注:书中原文查看其决议结果过程中任何时间点,个人认为可能翻译得有点问题,应该要强调是其决议之前)
  2. Promise决议确认后在查看结果时(then(..)注册的回调中)出现了js异常错误

这两种错误都不会被丢弃,但针对它们的处理方式有所不同:

针对1:
该Promise会被立即拒绝,但注意这个异常也被变成了异步行为

let p = new Promise ( function(resolve, reject){
    foo.bar(); // foo undefined 将抛出错误 Promise=>reject
    resolve( 42 ); // 不会执行到这里
});
p.then(
    function fulfilled(){
        // 不会执行到这里
    },
    function rejected(err){
        // err是一个TypeError异常
    }
)

针对2:
这个时候当前Promise已经决议,其决议结果是个不可变值
then(..)调用返回的下一个Promise被拒绝

let q = new Promise ( function(resolve, reject){
    resolve( 42 );
})
q.then(
    function fulfilled(){
        foo.bar(); // foo undefined 将抛出错误 导致then返回的Promise被reject
    },
    function rejected(err){
        // 不会执行到这里
    }
).then(
    function fulfilled(){
        // 不会执行到这里
    },
    function rejected(err){
        // err是一个TypeError异常
    }
)          

3.3.7 构建可信任的Promise

Promise.resolve(..) 规范化传入的值:

  • 传入一个非Promise、非thenable的立即值, 会得到一个用该值填充的Promise
  • 传入一个真正的Promise,会返回同一个Promise
  • 传入一个非Promise的thenable值,会试图展开这个值,持续到提取出一个具体的非类Promise的最终值

具体看例子(传入Promise的情况略)

// 传入一个立即值
let p = Promise.resolve(42);
p.then( res => {
    console.log('Promise.resolve(42).then:',res);
})
let p1 = Promise.resolve({});
p1.then( res => {
    console.log('Promise.resolve({}).then:',res);
})
// 传入一个 thenable 尝试展开
let p2 = Promise.resolve({
    then: function(cb) { cb(42)}
});
p2.then( res => {
    console.log('Promise.resolve(thenable).then:', res);
}, err => {
    console.log('Promise.resolve(thenable).then:', err);
})
// 注意 这种情况其实也是立即值!!!
let p3 = Promise.resolve(
    setTimeout(()=>{
        return 'inside a continuation'  
    },1000)
); // settimeout函数返回当前定时器引用=>耶 立即值
p3.then( res => {
    console.log('Promise.resolve(看起来是个异步).then:', res); 
})

3.4 Promise链式流

Promise不仅仅是一个单步执行this-then-that的操作机制,这只是它的构成部件,实际上Promise是可以连接到一起使用表示一系列异步步骤:

  • 每次对Promise调用then(..),它都会创建并返回一个新的Promise,我们可以将其链接起来;(并不局限于要求then中返回一个Promise)
  • 不管从then(..)调用的完成回调(第一个参数)返回的值是什么,它都会被自动设置为被链接Promise(上一点中的)的完成(resolve)(一定要理解这句话)
    再仔细看看第二点,结合上文 3.3.7 Promise.resolve(..)的能力,这是Promise链式流在每一步都能有异步能力的关键!

栗子:

// 返回立即值

    let p = Promise.resolve(21);
    p
    .then( function(v) {
        console.log(v);  // 21

        // 返回立即值
        return v * 2;
    })
    // 这里是链接的Promise
    .then ( function(v) {
        console.log(v);  // 42
    });

// 返回Promise并引入异步

    let p = Promise.resolve(21);
    p
    .then ( function(v) {
        // 返回一个异步Promise
        return new Promise( (resolve, reject) => {
            setTimeout(() => {
                resolve(v*2);
            }, 1000);
        });
    })
    .then ( function(v) {
        // 前一步延迟1s后执行
        console.log(v);
    })

Promise链不仅仅是一个表达多步异步序列的流程控制,还可以从一个步骤到下一个步骤的消息通道

3.5 错误处理

几种错误处理方式:

try...catch结构不能应用于异步模式


    function foo() {
        setTimeout(() => {
            baz.bar();  // 错误代码
        }, 100);
    }
    try{
        foo();  // 之后将抛出全局错误
    }
    catch (err) {
        // 不会走到这里
    }

foo()中有自己的异步完成函数,其中任何异步错误都无法捕捉到

node.js api或库中常见的err-first模式


    function foo(cb) {
        setTimeout(() => {
            try {
                var x = baz.bar();  //  错误代码
                cb(null, x);
            }
            catch (err) {
                cb(err);
            }
        }, 100);
    }

    foo( function(err, val) {
        if(err) {
            console.error(err);  //  报错惹
        }
        else {
            console.log(val);
        }
    })

分离回调模式(split-callback)
一个回调用于完成情况,一个回调用于拒绝情况
Promise采用的就是这种方式

先参考 3.3.6 再进行详细讨论:

Promise决议前、决议后产生的错误处理方式有所不同
错误的使用Promise API产生的错误会阻碍正常Promise对象的构造,这种情况下会立即抛出异常(这种情况应该死都不要出现 0 0)

3.5.1 绝望的陷阱

由于Promise链式特点,其链上的最后一步,不管是什么,总是存在着在未被查看的Promise中出现未捕获错误的可能性

即理论上来说:总有可能有错误未被捕获,而出现全局报错

P.S. 这也是个人认为使用Promise最头疼的一点

3.5.2 处理未捕获的情况

关于如何解决3.5.1提出问题的一些思路

  • 增加done(..)作为链式调用的终点,在其中可以查看未捕获的错误,并且不会创建和返回新的Promise
  • 依靠浏览器 追踪Promise对象在被垃圾回收时是否有拒绝(未捕获的错误),获得其报告 (什么功能?@TODO),可是如果Promise未被垃圾回收呢?

3.5.2 成功的坑

该小节讨论的是从作者角度提出一种避免在使用Promise时在开发者未注意的情况下出现未捕获错误而报出全局错误的方案

具体请看:

{
    let p = Promise.reject(21); // 将触发全局报错 Uncaught (in promise) 21

    let p1 = Promise.reject(21).then (  // 拒绝前,注册了一个错误处理函数
        (res) => {
            // 不会走到这里 
        },
        (err) => {
            console.log(`注册了一个错误处理函数:${err}`);
        }
    )
    Promise.prototype.defer = function (){
        // 作者提出的一个API  
        // 简单实现就是单纯的返回这个Promise本身 
        return this;
    }

    let p2 = Promise.reject(21).defer(); // p2的结果在将来会被查看,现在暂时不要报全局错误

    let foo = Promise.resolve(21);

    foo
    .then (function(v) {
        return p2; // 这里查看p2的结果
    }, function (err) {
        // 不会走到这里
    })
    .catch (function(v) {
        console.log(v); // p2的结果
    })
}

3.6 Promise模式

基于Promise构建的异步抽象模式

3.6.1 Promise.all([ .. ])

类似门(gate)这种机制:需要等待两个或更多并行/并发的任务都完成才能继续,它们的完成顺序并不重要,但必须都要完成,门才能打开并让流程控制继续

Promise.all([ .. ])的参数接收一个数组:

  • 数组中的每个值都会交给Promise.resolve(..) 过滤以保证传入值是一个真正的Promise (Promise.resolve(..)的作用参考 3.3.7 构建可信任的Promise
  • 数组为空,主promise就会立即完成

返回一个Promise:

  • 传入的所有promise完成,该promise标记完成,返回消息是一个由所有传入promise的完成消息组成的数组,与调用API时传入的顺序一致(与完成顺序无关)
  • 如果传入的promise中有任何一个被拒绝的话,该promise会立即被拒绝,并丢弃来自其他所有promise的全部结果(其他promise还是会执行),返回错误消息是被拒绝的那个promise的错误消息(注意,promise一旦决议结果不会变更,故仅有第一个被拒绝的promise错误消息会被主promise返回)

每个promise都必须关联一个拒绝/错误处理函数,特别是从Promise.all([ ... ])返回的那一个

3.6.2 Promise.race([ ... ])

类似门闩(shuan)竞态:一旦有任何一个Promise决议为完成,就标记为完成;一旦有任何一个Promise决议为拒绝,它就会拒绝

Promise.race([ ... ])的参数接收一个数组:

  • 被Promise.resolve(...)过滤那是当然的
  • 传入立即值没有任何意义,肯定是第一个立即值取胜
  • 如果传入一个空数组,会导致该Promise永远不会决议!千万不要这么做

返回一个Promise:

  • 和Promise.all([ ... ])不同,返回消息不是一个数组,因为只能接收一个promise的完成消息

关于这两个API需要注意

在all和race中存在着被忽略或丢弃的promise,如果这些promise中保存着重要的数据或资源或者开发者需要记录这些promise失败的事实,又该怎么办呢?

finally API就是基于这种情况提出的:Promise需要一个finally(...)回调注册,这个回调在Promise决议后总是会被调用,并允许执行任何必要的清理工作

注:书中提到finally还未被规范支持,而在18年1月已经正式加入到提案中了,可参考 https://github.com/tc39/proposals/blob/master/finished-proposals.mdhttps://github.com/tc39/proposal-promise-finally

书中还提到了一种观察模式(基于同一个Promise决议可以被多次查看),具体可以看栗子

    let foo = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(21);
        }, 301);
    });
    let timeout = function(time) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('timeout');
            }, time);
        })
    }
    // foo会被默默忽略
    Promise.race( [
        foo, 
        timeout(300)
    ])
    .then( (res) => {
        console.log(`Promise.race: ${res}`);
    })
    .finally( (res) => {
        console.log(`Promise.race: ${res}`);    // finally回调是不会提供任何参数的,详情可看 https://github.com/tc39/proposal-promise-finally
    })
    // 观察者模式
    if(!Promise.observe){
        Promise.observe = function(pr, cb){
            // 观察pr的决议
            pr.then( 
                function fulfilled (msg){
                    // 完成时
                    Promise.resolve(msg).then(cb);
                },
                function reject (msg){
                    // 拒绝时 传递错误消息 但注意观察者promise是resolve的
                    Promise.resolve(msg).then(cb);
                }
            );
            // 返回最初的promise
            return pr;
        }
    }
    // 还是上一个超时的例子
    Promise.race( [
        Promise.observe(
            foo,
            function cleanup (msg){
                console.log(`Promise.observe: ${msg}`); // foo即使没有在超时之前完成 也可以获取其决议情况
            }
        )
        .then 
    ])

3.6.3 all([ .. ])和race([ .. ])的变体


@TODO 自行实现 Promise.any finally map等扩展API

3.6.4 并发迭代

实现一个异步的map(..)工具

  • 接收一个数组的值(可以是Promise或其他值)
  • 接收一个在每个值上运行的一个函数
  • 返回一个Promise,其完成值是一个数组,该数组保存任务执行之后的异步完成值(保持映射顺序)

这里也主要看栗子

   if(!Promise.map) {
        Promise.map = function(vals, cb) {
            // 等待所有map的promise决议的新的promise
            return Promise.all(
                // 对vals使用map将每个值转出promise,值数组->Promise数组
                vals.map( function(val){
                    // 将val值替换成调用cb函数后决议的新的promise
                    return new Promise( function(resolve){
                        // resolve reject传入到cb函数中
                        cb(val, resolve);
                    })
                })
            )
        }
    }
    // 栗子
    var p1 = Promise.resolve(21);
    var p2 = Promise.resolve(30);
    var p3 = Promise.reject('opps');

    Promise.map( [p1,p2,p3], function(pr, resolve){
        Promise.resolve(pr)
        .then( val => {
            resolve( val*2 );
        },
            resolve  // 注意:不能发出拒绝信号,如果发出会导致Promise.map被拒绝,其他map结果也会被丢弃
        )
    })
    .then( (vals) => {
        console.log(vals);
    })

TODO:
Promise API 概述详解单独成篇

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

推荐阅读更多精彩内容