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

摘要：写在前面这一章的顺序对于未接触过使用过的童鞋而言略抽象了，前边几章主要为了说明和之前的异步方式相比有什么优势和它能解决什么问题，后边才详解的设计和各种场景下如何使用。建议先了解和简单使用过后再阅读，效果更佳。

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

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

正文

之前的方式：

利用回调函数封装程序中的continuation

回调交给第三方

第三方调用回调

实现正确功能

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

Promise的异步特性是基于任务的（图示如下）

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

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

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

Promise设计的重要基础

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

引申：

Promise的决议结果可以给多方多次查看

安全、可靠

基于thenable的鸭子类型

</>复制代码 
if(
  p !== null && 
  (
    typeof p === "object" ||
    typeof p === "function"
  ) && 
  typeof p.then === "function"
) {
  // 假定这是一个thenable
}
else {
  // 不是thenable
}

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

信任问题见 异步篇

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

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

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

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

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确定错误情况
  }
);

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

Promise至多只能有一个决议值

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

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

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

Promise创建过程或其决议确认之前的任何时间点上（注：书中原文查看其决议结果过程中任何时间点，个人认为可能翻译得有点问题，应该要强调是其决议之前）

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异常
    }
)          

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); 
})

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链不仅仅是一个表达多步异步序列的流程控制，还可以从一个步骤到下一个步骤的消息通道

几种错误处理方式：

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）

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

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

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

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

增加done(..)作为链式调用的终点，在其中可以查看未捕获的错误，并且不会创建和返回新的Promise

依靠浏览器 追踪Promise对象在被垃圾回收时是否有拒绝（未捕获的错误），获得其报告 （什么功能？@TODO），可是如果Promise未被垃圾回收呢？

该小节讨论的是从作者角度提出一种避免在使用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的结果
    })
}

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

类似门(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([ ... ])返回的那一个

类似门闩(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 
    ])

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

实现一个异步的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 概述详解多带带成篇