JavaScript：Promise基本概念学习

  • 最早接触Promise概念是在创业公司，同事引入的Promise第三方库，用在用Swift写的工程中。
  • 异步编程，用block已经是主流，分为成功、失败、最终三个分支。如果嵌套，那么将一层一层地嵌套进去。在真正执行的时候，“从内向外”一层一层执行。“从外到内”写，但是“从内到外”执行，并且还是一层层嵌套，这个不符合人的思维习惯。Promise就是将这种情况统一调整为“从左到右”，书写和执行都一样。并且把一层层的嵌套修改为一连串的点点点函数调用，这个“很人性化”。
  • 在函数式编程中，curry和compose操作都是“从右向左”的，而Monad就是将操作改为“很人性化”的“从左向右”，书写和执行都是。并且还可以把嵌套flatMap一下，“铺平”，从而形成一连串点点点函数调用。
  • Promise和Monad针对的领域不同，不过都达到了相同的目标（点点点函数链式调用，从左向右书写和执行）。可以把Promise看成是一种专门用于异步领域的Monad

什么是Promise

  • Promise是抽象异步处理对象以及对其进行各种操作的组件。
  • 回调函数是处理异步过程的常用方式，传给回调函数的参数为(error对象， 执行结果)组合。
  • Node.js等规定在JavaScript的回调函数的第一个参数为Error对象，这也是它的一个惯例。
  • 而Promise则是把类似的异步处理对象和处理规则进行规范化， 并按照采用统一的接口来编写，而采取规定方法之外的写法都会出错。

基本概念

  • 要想创建一个promise对象、可以使用new来调用Promise的构造器来进行实例化。
var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

  • 对通过new生成的promise对象为了设置其值在 resolve(成功) /reject(失败)时调用的回调函数 可以使用promise.then()实例方法。

  • onFulfilled、onRejected 两个都为可选参数。一般情况，onFulfilled会用，onRejected省略，一般用catch比较多

promise.then(onFulfilled, onRejected);

  • promise.then成功和失败时都可以使用。异常的时候调用 promise.catch(onRejected)

  • 像Promise 这样的全局对象还拥有一些静态方法。包括 Promise.all()还有 Promise.resolve()等在内，主要都是一些对Promise进行操作的辅助方法。

  • 用new Promise实例化的promise对象有以下三个状态。其中 左侧为在 ES6 Promises规范中定义的术语， 而右侧则是在 Promises/A+中描述状态的术语。基本上状态在代码中是不会涉及到的，所以名称也无需太在意。
    (1) "has-resolution" - Fulfilled: resolve(成功)时。此时会调用 onFulfilled
    (2) "has-rejection" - Rejected: reject(失败)时。此时会调用 onRejected
    (3) "unresolved" - Pending:既不是resolve也不是reject的状态。也就是promise对象刚被创建后的初始化状态等

promise-states.png
  • promise对象的状态，从Pending转换为Fulfilled或Rejected之后， 这个promise对象的状态就不会再发生任何变化。也就是说，Promise与Event等不同，在.then后执行的函数可以肯定地说只会被调用一次。

基本流程

  1. new Promise(fn)返回一个promise对象
  2. 在fn中指定异步等处理
    处理结果正常的话，调用resolve(处理结果值);
    处理结果错误的话，调用reject(Error对象); 
function getURL(URL) {
    return new Promise(function (resolve, reject) {
        var req = new XMLHttpRequest();
        req.open('GET', URL, true);
        req.onload = function () {
            if (req.status === 200) {
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            }
        };
        req.onerror = function () {
            reject(new Error(req.statusText));
        };
        req.send();
    });
}
// 运行示例
var URL = "http://httpbin.org/get";
getURL(URL).then(function onFulfilled(value){
    console.log(value);
}).catch(function onRejected(error){
    console.error(error);
});
  • 本质上还是回调函数。将回调函数用promise对象包装一下。
  • resolve方法的参数并没有特别的规则，基本上把要传给回调函数参数放进去就可以了。 (then 方法可以接收到这个参数值)
  • 传给reject 的参数也没有什么特殊的限制，一般只要是Error对象（或者继承自Error对象）就可以。
  • 其实 .catch只是promise.then(undefined, onRejected) 的别名而已。一般说来，使用.catch来将resolve和reject处理分开来写是比较推荐的做法。
  • Promise.resolve作为 new Promise()
    的快捷方式，在进行promise对象的初始化或者编写测试代码的时候都非常方便。

异步执行顺序

在使用Promise.resolve(value)等方法的时候，如果promise对象立刻就能进入resolve状态的话，那么你是不是觉得.then里面指定的方法就是同步调用的呢？
实际上，.then中指定的方法调用是异步进行的。下面是一个例子：

var promise = new Promise(function (resolve){
    console.log("inner promise"); // 1
    resolve(42);
});
promise.then(function(value){
    console.log(value); // 3
});
console.log("outer promise"); // 2
  • 由于JavaScript代码会按照文件的从上到下的顺序执行，所以最开始 <1> 会执行，然后是resolve(42);被执行。这时候 promise对象的已经变为确定状态，FulFilled被设置为了42 。
  • 下面的代码 promise.then注册了<3>这个回调函数，但是这个是异步的，这里不会马上执行。
  • 函数<2>会最先被调用，最后才会调用回调函数<3> 。

输出结果：

inner promise // 1
outer promise // 2
42            // 3

明明可以以同步方式进行调用的函数，非要使用异步的调用方式，这是在Promise设计上的规定方针。

不要对异步回调函数进行同步调用 Promise是符合这一点的。

方法链的形式

在Promise里可以将任意个方法连在一起作为一个方法链（method chain）。

aPromise.then(function taskA(value){
// task A
}).then(function taskB(vaue){
// task B
}).catch(function onRejected(error){
    console.log(error);
});

如果把在then 中注册的每个回调函数称为task的话，那么我们就可以通过Promise方法链方式来编写能以taskA → task B这种流程进行处理的逻辑了。

  • 每次调用then都会返回一个新创建的promise对象。如果不用链式调用，那么就没有顺序执行的效果，要极力避免。
// 1: 对同一个promise对象同时调用 `then` 方法
var aPromise = new Promise(function (resolve) {
    resolve(100);
});
aPromise.then(function (value) {
    return value * 2;
});
aPromise.then(function (value) {
    return value * 2;
});
aPromise.then(function (value) {
    console.log("1: " + value); // => 100
})
// 这种是过程式调用，没有顺序执行的功能，每个函数的参数value都是100，需要极力避免这种调用

// 2: 对 `then` 进行 promise chain 方式进行调用
var bPromise = new Promise(function (resolve) {
    resolve(100);
});
bPromise.then(function (value) {
    return value * 2;
}).then(function (value) {
    return value * 2;
}).then(function (value) {
    console.log("2: " + value); // => 100 * 2 * 2 = 400
});
// 这种链式调用，才是期望的样子。
// 就算是简单的值（这里是100），在传递的时候，传的也是promise对象，中间有“装箱”，“拆箱”的操作。
// then函数，就是那种输入输出都是“类型”的函数，能够形成链式调用。所以说promise是monad的一种实现
  • 在实际使用中，要避免下面的错误用法
function badAsyncCall() {
    var promise = Promise.resolve();
    promise.then(function() {
        // 任意处理
        return newVar;
    });
    return promise;
}

在 promise.then 中产生的异常不会被外部捕获，也不能得到then 的返回值，即使其有返回值。原因是promise !== promise.then()

  • 应该该为下面的正确形式
function anAsyncCall() {
    var promise = Promise.resolve();
    return promise.then(function() {
        // 任意处理
        return newVar;
    });
}

多个异步调用进行统一处理

  • 为了应对这种需要对多个异步调用进行统一处理的场景，Promise准备了 Promise.all 和 Promise.race 这两个静态方法。
  • Promise.all 接收一个promise对象的数组作为参数，当这个数组里的所有promise对象全部变为resolve或reject状态的时候，它才会去调用.then方法。
  • 传递给 Promise.all的promise并不是一个个的顺序执行的，而是同时开始、并行执行的。
// `delay`毫秒后执行resolve
function timerPromisefy(delay) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(delay);
        }, delay);
    });
}
var startDate = Date.now();
// 所有promise变为resolve后程序退出
Promise.all([
    timerPromisefy(1),
    timerPromisefy(32),
    timerPromisefy(64),
    timerPromisefy(128)
]).then(function (values) {
    console.log(Date.now() - startDate + 'ms');
    // 约128ms
    console.log(values);    // [1,32,64,128]
});
// 输出：有调度损耗，线程间同步损耗，理论上应该输出128ms，实际输出145ms是合理的。多执行几次，这个值每次都会变
// 145ms
// [ 1, 32, 64, 128 ]
  • 4个promise是并行执行的
  • 4个promise都执行完毕后再执行then
  • 传递的values数组和promise数组的顺序一致
  • Promise.race 只要有一个promise对象进入FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理。
// `delay`毫秒后执行resolve
function timerPromisefy(delay) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(delay);
        }, delay);
    });
}
// 任何一个promise变为resolve或reject 的话程序就停止运行
Promise.race([
    timerPromisefy(1),
    timerPromisefy(32),
    timerPromisefy(64),
    timerPromisefy(128)
]).then(function (value) {
    console.log(value);    // => 1
});
  • Promise.race 在第一个promise对象变为Fulfilled之后，并不会取消其他promise对象的执行。
var winnerPromise = new Promise(function (resolve) {
        setTimeout(function () {
            console.log('winner funtion running');
            resolve('this is winner');
        }, 10);
    });
var loserPromise = new Promise(function (resolve) {
        setTimeout(function () {
            console.log('loser funtion running');
            resolve('this is loser');
        }, 1000);
    });
// 第一个promise变为resolve后程序停止
Promise.race([winnerPromise, loserPromise]).then(function (value) {
    console.log(value);    // => 'this is winner'
});

// 输出：
// winner funtion running
// this is winner
// loser funtion running
  • 数组中[winnerPromise, loserPromise]中的promise同时开始执行
  • 10ms后winnerPromise胜出，输出winner funtion running
  • Promise.race()函数有了结果，就是winnerPromise，顺序执行then，输出传递的value，这里是this is winner。这个就是winnerPromise的resolve信息resolve('this is winner');
  • loserPromise对象没有被取消，继续执行。1000ms后，loserPromise对象中的函数执行，输出loser funtion running
    *loserPromise对象中的resolve信息'resolve('this is loser');不会被传递。

错误处理

  • .then 和 .catch都会创建并返回一个 新的promise对象。 Promise实际上每次在方法链中增加一次处理的时候所操作的都不是完全相同的promise对象。
then_catch.png

  • 使用promise.then(onFulfilled, onRejected) 的话，在onFulfilled中发生异常的话，在 onRejected中是捕获不到这个异常的。原因是他们在promise chain中处于同一级

  • 在 promise.then(onFulfilled).catch(onRejected) 的情况下.then中产生的异常能在.catch中捕获。因为.catch处于.then中的下一级

  • .then和 .catch在本质上是没有区别的，所不同的是在整个promise chain中所处的级别不同。.catch更靠后一点，更可靠一点。

  • 如果一定要用.then来进行错误处理，那么就要新增一个下一级的.then来处理

function throwError(value) {
    // 抛出异常
    throw new Error(value);
}
// <1> onRejected不会被调用
function badMain(onRejected) {
    return Promise.resolve(42).then(throwError, onRejected);
}
// <2> 有异常发生时onRejected会被调用
function goodMain(onRejected) {
    return Promise.resolve(42).then(throwError).catch(onRejected);
}
// <3> 使用下一级的then
function nextThenMain(onRejected) {
    return Promise.resolve(42).then(throwError).then(null, onRejected);
}

// 运行示例
badMain(function(){
    console.log("BAD");
});
goodMain(function(){
    console.log("GOOD");
});
nextThenMain(function(){
    console.log("Next Then");
});
// 输出： 
// GOOD
// Next Then

这里的badMain，之所以捕获不到错误，是因为用了同一级的.then
错误处理统一使用.catch，不要用.then

  • 主动抛异常，使用reject而不是throw 
// 不要用throw，这虽然能运行，但很不promise风格，要避免
var promise = new Promise(function(resolve, reject){
    throw new Error("message");
});
promise.catch(function(error){
    console.error(error);// => "message"
});

// 这是推荐的方式，形成习惯
var promise = new Promise(function(resolve, reject){
    reject(new Error("message"));
});
promise.catch(function(error){
    console.error(error);// => "message"
})
  • 在.then中使用reject，推荐用下面的格式
var onRejected = console.error.bind(console);
var promise = Promise.resolve();
promise.then(function () {
    return Promise.reject(new Error("this promise is rejected"));
}).catch(onRejected);
//  this promise is rejected

参考文章

JavaScript Promise迷你书（中文版）

ES6 JavaScript Promise的感性认知

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,686评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,668评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,160评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,736评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,847评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,043评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,129评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,872评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,318评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2赞 351

推荐阅读更多精彩内容

  • ES6之Promise深入学习笔记
    Promiese 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，语法上说，Pr...
    雨飞飞雨阅读 3,352评论 0赞 19
  • 史上最易读懂的 Promise 实现
    本文适用的读者 本文写给有一定Promise使用经验的人，如果你还没有使用过Promise，这篇文章可能不适合你，...
    HZ充电大喵阅读 7,299评论 6赞 19
  • JavaScript(ES6) - Promise对象
    Promise的含义:   Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和...
    呼呼哥阅读 2,167评论 0赞 16
  • 13、Promise 对象
    00、前言Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区...
    夜幕小草阅读 2,129评论 0赞 12
  • JavaScript异步Promise
    JavaScript里通常不建议阻塞主程序，尤其是一些代价比较昂贵的操作，如查找数据库，下载文件等操作，应该用异步...
    张歆琳阅读 2,752评论 0赞 12