从 Promise 开始踏入异步操作之旅

一、概述
1、什么是 Promise？
MDN 对 Promise 的定义：

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
直译：Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。

通俗的说，这个异步操作可以一起执行多个任务，函数调用后不会立即返回执行的结果。如果任务A需要等待，可先执行任务B，等到任务A结果返回后再继续回调。
如下，定时器的异步模式：

// code1
setTimeout(function() {
    console.log('taskA, 定时器异步');
}, 0);
console.log('taskB, 同步操作');

// taskB, 同步操作
// taskA, 定时器异步

由 code1 可知，异步任务总是在当前脚本执行完同步任务后才执行任务。
2、为什么要用 Promise？
在我们写JavaScript 时，难免是要用到回调函数的，有时候需要多层嵌套回调，有时极端时，会出现厄运回调（如图-厄运回调金字塔）：

厄运回调地狱

一般我们在项目开发中用的比较多的情况是在使用 ajax 时：

// code 2
request('test1.html', '', function(data1) {
    console.log('第一次请求成功, 这是返回的数据:', data1);
    request('test2.html', data1, function (data2) {
        console.log('第二次请求成功, 这是返回的数据:', data2);
        request('test3.html', data2, function (data3) {
            console.log('第三次请求成功, 这是返回的数据:', data3);
            //request... 继续请求
        }, function(error3) {
            console.log('第三次请求失败, 这是失败信息:', error3);
        });
    }, function(error2) {
        console.log('第二次请求失败, 这是失败信息:', error2);
    });
}, function(error1) {
    console.log('第一次请求失败, 这是失败信息:', error1);
});

上述 code2 代码出现了多层嵌套现象，这样并不利于编码维护和编程体验。
这时，我们就可以借用 promise 的强大作用，用 then 链式回调把上述 code2 代码简化如下 code3：

// code3
sendRequest('test1.html', '').then(function(data1) {
    console.log('第一次请求成功, 这是返回的数据:', data1);
}).then(function(data2) {
    console.log('第二次请求成功, 这是返回的数据:', data2);
}).then(function(data3) {
    console.log('第三次请求成功, 这是返回的数据:', data3);
}).catch(function(error) {
    //用catch捕捉前面的错误
    console.log('sorry, 请求失败了, 这是失败信息:', error);
});

上面代码code3 是不是看起来清爽啦！这就是 Promise 的强大之处。
二、基本方法
1、基本用法
Promise 有以下三种状态：

  • Pending：进行中，表示初始值
  • Fulfilled：表示操作成功
  • Rejected：表示操作失败

Promise有两种状态改变的方式，既可以从pending转变为fulfilled，也可以从pending转变为rejected。一旦状态改变，就 凝固 了，会一直保持这个状态，不会再发生变化。当状态发生变化，promise.then绑定的函数就会被调用。
2、基本API
.then()

语法：Promise.prototype.then(onFulfilled, onRejected)

对 promise 添加 onFulfilled 和 onRejected 回调，并返回的是一个新的Promise实例（不是原来那个Promise实例），且返回值将作为参数传入这个新Promise的 resolve 函数。

因此，我们可以使用链式写法，如上文的 code3。由于前一个回调函数，返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。
.catch()

语法：Promise.prototype.catch(onRejected)

该方法用于指定放生错误时的回调函数。

// code4
promise.then(function(data) {
    console.log('success');
}).catch(function(error) {
    console.log('error', error);
});

Promise 对象捕获错误，还有其它的等同写法：

// code5
var promise = new Promise(function (resolve, reject) {
    throw new Error('test');
});
/*******等同于*******/
var promise = new Promise(function (resolve, reject) {
    reject(new Error('test'));
});

//用catch捕获
promise.catch(function (error) {
    console.log(error);
});
// Error: test

从 code5 中可以看出，reject 方法的作用，等同于抛错。
Promise 对象的错误，会一直向后传递，直到被捕获。即错误总会被下一个 catch 所捕获。then 方法指定的回调函数，若抛出错误，也会被下一个 catch 捕获，catch 中也能抛错，则需要后面的 catch 来捕获。

// code6
sendRequest('test.html').then(function(data1) {
    //do something
}).then(function (data2) {
    //do something
}).catch(function (error) {
    //处理前面三个Promise产生的错误
});

Promise 状态一旦改变就会凝固，不会在改变。一次 Promise 一旦 fulfilled 了，再抛错，也不会变为 rejected，就不会被 catch 了。

// code7
var promise = new Promise(function(resolve, reject) {
  resolve();
  throw 'error';
});

promise.catch(function(e) {
   console.log(e);      //This is never called
});

//在回调函数前抛异常
var p1 = { 
    then: function(resolve) {
      throw new Error("error");
      resolve("Resolved");
    }
};

var p2 = Promise.resolve(p1);
p2.then(function(value) {
    //not called
}, function(error) {
    console.log(error);       // => Error: error
});

//在回调函数后抛异常
var p3 = { 
    then: function(resolve) {
        resolve("Resolved");
        throw new Error("error");
    }
};

var p4 = Promise.resolve(p3);
p4.then(function(value) {
    console.log(value);     // => Resolved
}, function(error) {
    //not called
});

如果没有使用 catch 方法指定处理错误的回调函数，Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应（chrome 会抛错，Safari 和 Firefox 不抛错），这是 Promise 的一个缺点。

// code8
var promise = new Promise(function (resolve, reject) {
    resolve(x);
});
promise.then(function (data) {
    console.log(data);
});
// Uncaught (in promise) ReferenceError: x is not defined

.all()

语法：Promise.all(iterable)

该方法把多个 Promise 实例，打包成一个新的 Promise 实例。

// code9
var p = Promiese.all([p1, p2, p3]);

Promise.all 方法接受一个数组（或具有 Iterator 接口的对象）作为参数，数组中的对象（[p1, p2, p3）均为 Promise 实例（如果不是一个 Promise，该项会被用 Promise.resolve 放转换为一个 Promise），它的状态由这个上 Promise 实例决定。

  • 当三个实例的状态都变味 fulfilled，p的状态菜户变为 fulfilled，并将三个 Promise 返回的结果，按照参数的顺序（而不是 resolved 的顺序）存入数组，传给 p 的回调函数，如 code10。
  • 当三个实例中有一个装填为 rejected，p 的状态也会变为 rejected，并把第一个 reject 的 Promise 的返回值，传给 p 的回调函数，如 code11.
// code10
var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 3000, "first");
});
var p2 = new Promise(function (resolve, reject) {
    resolve('second');
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "third");
}); 

Promise.all([p1, p2, p3]).then(function(values) { 
  console.log(values); 
});


// 约 3s 后
["first", "second", "third"] 

// code11
var p1 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 1000, "one"); 
}); 
var p2 = new Promise((resolve, reject) => { 
  setTimeout(reject, 2000, "two"); 
});
var p3 = new Promise((resolve, reject) => {
  reject("three");
});

Promise.all([p1, p2, p3]).then(function (value) {
    console.log('resolve', value);
}, function (error) {
    console.log('reject', error);    // => reject three
});

// reject three

这多个 promise 是同时开始、并行执行的，而不是顺序执行。从下面 code12 例子可以看出。如果一个个执行，那至少需要 1+32+64+128。

// code12
function timerPromisefy(delay) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(delay);
        }, delay);
    });
}
var startDate = Date.now();

Promise.all([
    timerPromisefy(1),
    timerPromisefy(32),
    timerPromisefy(64),
    timerPromisefy(128)
]).then(function (values) {
    console.log(Date.now() - startDate + 'ms');
    console.log(values);
});

// 130ms       //不一定，但大于128ms
[1,32,64,128]

.race()

语法： Promise.race(iterable)

该方法也是将多个 Promise 实例，打包成一个新的 Promise 实例。

var p = Promise.race([p1, p2, p3]);

Promise.race方法同样接受一个数组（或具有Iterator接口）作参数。当p1, p2, p3中任一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的 promise 的返回值，传给 p 的回调函数。

// code13
var p1 = new Promise(function(resolve, reject) { 
    setTimeout(reject, 500, "one"); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "two"); 
});

Promise.race([p1, p2]).then(function(value) {
    console.log('resolve', value); 
}, function(error) {
    //not called
    console.log('reject', error); 
});

// resolve two

var p3 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, "three");
});
var p4 = new Promise(function(resolve, reject) { 
    setTimeout(reject, 100, "four"); 
});

Promise.race([p3, p4]).then(function(value) {
    //not called
    console.log('resolve', value);              
}, function(error) {
    console.log('reject', error); 
});

// reject four

.resolve()

语法：
Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);

该方法可以看做 new Promise() 的快捷方式。

// code14
Promise.resolve('Success');

/*******等同于*******/
new Promise(function (resolve) {
    resolve('Success');
});

这段代码会让这个Promise对象立即进入resolved状态，并将结果success传递给then指定的onFulfilled回调函数。由于Promise.resolve()也是返回Promise对象，因此可以用.then()处理其返回值。

// code15
Promise.resolve('success').then(function (value) {
    console.log(value);
});

// Success

// code16
//Resolving an array
Promise.resolve([1,2,3]).then(function(value) {
  console.log(value[0]);    // => 1
});

//Resolving a Promise
var p1 = Promise.resolve('this is p1');
var p2 = Promise.resolve(p1);
p2.then(function (value) {
    console.log(value);     // => this is p1
});

Promise.resolve()的另一个作用就是将thenable对象（即带有then方法的对象）转换为promise对象。

// code17
var p1 = Promise.resolve({ 
    then: function (resolve, reject) { 
        resolve("this is an thenable object!");
    }
});
console.log(p1 instanceof Promise);     // => true

p1.then(function(value) {
    console.log(value);     // => this is an thenable object!
  }, function(e) {
    //not called
});

.reject()

语法： Promise.reject(reason)

这个方法和上述的Promise.resolve()类似，它也是new Promise()的快捷方式。

// code 18
Promise.reject(new Error('error'));

/*******等同于*******/
new Promise(function (resolve, reject) {
   reject(new Error('error'));
});

3、两个附加方法

.done()

语法：
asyncFunc()
.then(f1)
.catch(r1)
.then(f2)
.done();

Promise对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为Promise内部的错误不会冒泡到全局）。因此，我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。

.finally()
finally方法用于指定不管Promise对象最后状态如何，都会执行的操作。它与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。

// code19
Promise.resolve().then(()=>{
if(needToContinueProcess)   return xxx;
return Promise.reject({final})
})
.then(processOne)
.then(processTwo)
.catch(err=>{
if(err instanceof Error) return handleError
})
.finally()`

三、使用注意事项
缺点：
1、无法取消 Promise。一旦新建它就会立即执行，无法中途取消。
2、如果不设置回调函数，Promise 内部抛出的错误不会反应到外部。
3、当处于 pending 状态时，无法得知目前进展到哪一阶段。
注意事项：
1、始终在Promise 构造器中书写逻辑的话，即使出现了意外的输入，也能绝大部分情况下返回一个Rejected 的 Promise
2、在 Promise 构造器中，除非你明确知道使用 throw 的正确姿势，否则都请使用 reject。
3、能够兼容 Promise 和 Callback 确实是件很棒的事情，用第三方代码库（如bluebird）前请尽量理解其原理，短小的话完全可以自己写一个。Promise虽好，可不要乱用哦，实时牢记它会吞没错误的风险。
四、自我检验题
https://zhuanlan.zhihu.com/p/30797777
五、结语
本章的重点是需要明白什么是Promise？为什么要使用 Promise？在使用 Promise 知道基本用法和注意事项。下一章我们来认识一下 ES6 中的遍历器 Iterator。
六、参考

戳我博客

章节目录

1、ES6中啥是块级作用域？运用在哪些地方？
2、ES6中使用解构赋值能带给我们什么？
3、ES6字符串扩展增加了哪些？
4、ES6对正则做了哪些扩展？
5、ES6数值多了哪些扩展？
6、ES6函数扩展（箭头函数）
7、ES6 数组给我们带来哪些操作便利？
8、ES6 对象扩展
9、Symbol 数据类型在 ES6 中起什么作用？
10、Map 和 Set 两数据结构在ES6的作用
11、ES6 中的Proxy 和 Reflect 到底是什么鬼？
12、从 Promise 开始踏入异步操作之旅
13、ES6 迭代器(Iterator)和 for...of循环使用方法
14、ES6 异步进阶第二步：Generator 函数
15、JavaScript 异步操作进阶第三步：async 函数
16、ES6 构造函数语法糖：class 类

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

推荐阅读更多精彩内容

  • Promise 对象
    Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函...
    neromous阅读 8,697评论 1赞 56
  • ES6之Promise深入学习笔记
    Promiese 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，语法上说，Pr...
    雨飞飞雨阅读 3,348评论 0赞 19
  • 13、Promise 对象
    00、前言Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区...
    夜幕小草阅读 2,126评论 0赞 12
  • Promise摘抄与学习
    //本文内容起初摘抄于 阮一峰 作者的译文，用于记录和学习，建议观者移步于原文 概念： 所谓的Promise，...
    曾经过往阅读 1,222评论 0赞 7
  • python的模块安装
    下载安装包 为了避免下载各种安装包，推荐大家通过pip的方式进行安装。比如我需要安装beautifulsoup4，...
    xunzou阅读 283评论 0赞 0