当前位置： 首页 > news >正文

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

news 来源：原创 2024/4/24 21:37:17

写在前面：
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/propo... 和 https://github.com/tc39/propo...

书中还提到了一种观察模式（基于同一个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);
                    })
                })
            )
        }
    }
    // 使用Promise.map
    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 概述详解单独成篇

相关文章：

  • 使用LAMP环境搭建wordpress论坛
  • CLR Via CSharp读书笔记（21）：自动内存管理（垃圾回收）
  • 编码与解码
  • C#开发中碰到的问题------input file change 事件只执行一次
  • iframe自适应
  • Mac OS X 苹果电脑如何查什么程序在偷跑流量
  • SSH隧道技术简介：端口转发SOCKS代理
  • Lync Server 2013 标准版部署（一）AD准备
  • ECMALL综合手册
  • Android 7.1源码编译导入AS完整教程
  • 100-59
  • 只要这几步，webpack速成不是事儿
  • 百度天工携手康力电梯打造电梯物联网智能时代
  • 数据库表设计原则（多表字段尽量唯一）
  • Js中for in 和for of的区别
  • [PHP内核探索]PHP中的哈希表
  • [译]Python中的类属性与实例属性的区别
  • angular2开源库收集
  • AngularJS指令开发（1）——参数详解
  • CSS选择器——伪元素选择器之处理父元素高度及外边距溢出
  • C语言笔记（第一章：C语言编程）
  • overflow: hidden IE7无效
  • Swoft 源码剖析 - 代码自动更新机制
  • vue 配置sass、scss全局变量
  • vue：响应原理
  • vue从创建到完整的饿了么（18）购物车详细信息的展示与删除
  • 发布国内首个无服务器容器服务，运维效率从未如此高效
  • 极限编程 (Extreme Programming) - 发布计划 (Release Planning)
  • 记一次和乔布斯合作最难忘的经历
  • 简析gRPC client 连接管理
  • 前端面试之闭包
  • 前端设计模式
  • 树莓派 - 使用须知
  • 我的业余项目总结
  • 我看到的前端
  • 小试R空间处理新库sf
  • 异步
  • 转载：[译] 内容加速黑科技趣谈
  • const的用法,特别是用在函数前面与后面的区别
  • ​你们这样子，耽误我的工作进度怎么办？
  • ​水经微图Web1.5.0版即将上线
  • ​油烟净化器电源安全，保障健康餐饮生活
  • (C#)获取字符编码的类
  • (C++20) consteval立即函数
  • （C语言）共用体union的用法举例
  • （八）Spring源码解析：Spring MVC
  • （二）斐波那契Fabonacci函数
  • （四）Linux Shell编程——输入输出重定向
  • (转)重识new
  • .NET CF命令行调试器MDbg入门（三） 进程控制
  • .net core使用RPC方式进行高效的HTTP服务访问
  • .net 按比例显示图片的缩略图
  • .NET 中使用 Mutex 进行跨越进程边界的同步
  • .net/c# memcached 获取所有缓存键(keys)
  • .NET面试题(二)