Promise 学习笔记 - 时间支配者

发表于 | 分类于 | 评论数：

你们别拦着我，我要把学习笔记都上交给国家。。完。

前言

JavaScript 的 promises 事实标准称为 Promises/A+。ES6 的 Promise API 便遵循这个标准。
promises 的英文直译是“承诺，诺言”。但是在张鑫旭大神的《ES6 JavaScript Promise的感性认知》文章里得知，
而是应该根据其音译——“普罗米修斯”，来翻译。普罗米修斯是希腊神话故事中的英雄，名字的意思是“先知”。

回调地狱

好了，我就不讲那些学术化的东西了，直接进入正题，来个实际的例子比什么都强。
例如我们有3个 ajax 请求，需要按照顺序加载。

1
2
3
4
5
6
7
8
9
$.get("/url1", function (data) {
    // 一些处理
    $.get("/url2", function (data) {
        // 一些处理
        $.get("/url3", function (data) {
            // 最终处理
        });
    });
});

非常熟悉的画面，那如果请求增加到10个，甚至更多，会发生什么呢？

The callback hell!

这幅图非常直观形象的展示了回调地狱。

时间支配 - 按顺序调度

为了避免回调地狱的发生，就需要 Promise 出马来合理的支配我们的任务时间。
首先需要学习下第一个 api，具体参阅 MDN Promise 文档。
其实非常简单，就是用 Promise 包装下 ajax 请求即可，代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 用 Promise 包装 get 请求
function myGet(url) {
    return new Promise(function(resolve, reject) {
        $.get(url, resolve);
    });
}

myGet('/url1').then(function (data) {
    // 一些处理，data为返回值
    return myGet('/url2');
}).then(function (data) {
    // 一些处理
    return myGet('/url3');
}).then(function (data) {
    // 最终处理
});

这样就可以按顺序写 ajax 调用了，不会陷入无尽的回调之中。
如果你熟悉 jquery，那么你一定知道 Deferred，它实现了类似 Promise 的东西。

1
2
3
4
5
6
7
8
9
$.get("/url1").then(function (data) {
    // 一些处理，data为返回值
    return $.get("/url2");
}).then(function (data) {
    // 一些处理
    return $.get("/url3");
}).then(function (data) {
    // 最终处理
});

这样看着简洁多了，虽然 Deferred 和 Promise 实现方法不一样，但是他们的结果是一致的。

时间支配 - 异步并发

大家都知道 ajax 异步请求是没有返回顺序的，发了3个请求，有可能是1,2,3的返回，也有可能是3,1,2的返回顺序。
那我不想按顺序请求，而是并发请求，但是在最终所有请求完成后执行一段操作。
比如页面所有数据都加载完后隐藏 loading 层。

这个时候，需要用到一个新方法 Promise.all，其实很简单，它接受一个 promise 数组最为参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function myGet(url) {
    return new Promise(function(resolve, reject) {
        $.get(url, resolve);
    });
}

var arr = [];
arr.push(myGet('/url1'));
arr.push(myGet('/url2'));
arr.push(myGet('/url3'));

Promise.all(arr).then(function (datas) {
    // 最终处理，datas 是所有返回结果的数组
    console.log("返回数据为", datas);
});

感觉比刚才的按顺序还要清爽，有木有。其实 jquery 也有类似的功能，而且用起来超爽的。

1
2
3
4
5
$.when($.get('/url1'), $.get('/url2'), $.get('/url3'))
.then(function (data1, data2, data3) {
    // 最终处理
    console.log("返回数据为", data1, data2, data3);
});

虽然形式有点怪异，不过调整下就OK了。

1
2
3
4
5
6
7
8
9
var arr = [];
arr.push($.get('/url1'));
arr.push($.get('/url2'));
arr.push($.get('/url3'));

$.when.apply(null, arr).then(function () {
    // 最终处理
    console.log("返回数据为", arguments);
});

利用 apply 来展开参数，代码看着舒服多了，跟上面的 Promise.all 是一样一样的。

结束语

本文本是我在一边学习测试一边写的，例子都跑过OK的，通篇下来后，对 Deferred 和 Promise 有了一定认识，
虽然并不一定透彻，至少比起以前好多了。

为什么叫它为 时间支配者 呢，一开始没这样的想法，写到一半的时候发现确实可以合理的支配异步的时间调度问题。
异步操作最大的特点就是时间的不确定性，所以正常情况下很难流畅的书写简单而有逻辑性的代码。

比如按顺序的异步，虽然可以合理的回调，但是会陷入回调地狱，再如并发异步呢？
并发异步，也许你要设置一个全局变量来记次，最后一个完成的，要触发下完成后的任务。
这样虽然也可以实现，但是代码会显的臃肿而又凌乱。

但是有了 Promise 的帮助，这一切变的这么简单，自然。