Promise实战

在很多需要与数据打交道的场合下，我们会遇到很多异步的情况,在异步操作的时候，我们还需要处理成功和失败两种情况，并且成功的时候，还可能需要把结果传递给下一个Ajax调用，从而形成"函数嵌套"的情况。callback是编写Javascript异步代码最最最简单的机制。可用这种原始的callback必须以牺牲控制流、异常处理和函数语义为代价。

具体实现的库

Polyfill

只需要在浏览器中加载Polyfill类库，就能使用IE10等或者还没有提供对Promise支持的浏览器中使用Promise里规定的方法。

  • jakearchibald/es6-promise:一个兼容 ES6 Promises 的Polyfill类库。 它基于 RSVP.js 这个兼容 Promises/A+ 的类库， 它只是 RSVP.js 的一个子集，只实现了Promises 规定的 API。
  • yahoo/ypromise: 这是一个独立版本的 YUI 的 Promise Polyfill，具有和 ES6 Promises 的兼容性。
  • getify/native-promise-only: 以作为ES6 Promises的polyfill为目的的类库 它严格按照ES6 Promises的规范设计，没有添加在规范中没有定义的功能。 如果运行环境有原生的Promise支持的话，则优先使用原生的Promise支持。

    扩展类库

Promise扩展类库除了实现了Promise中定义的规范之外，还增加了自己独自定义的功能。

  • then/promise: a super set of ES6 Promises designed to have readable, performant code and to provide just the extensions that are absolutely necessary for using promises today.
  • petkaantonov/bluebird: 这个类库除了兼容 Promise 规范之外，还扩展了取消promise对象的运行，取得promise的运行进度，以及错误处理的扩展检测等非常丰富的功能，此外它在实现上还在性能问题下了很大的功夫。
  • when: 大小很小,node和浏览器环境下都可以使用。
  • q: 类库 Q 实现了 Promises 和 Deferreds 等规范。 它自2009年开始开发，还提供了面向Node.js的文件IO API Q-IO 等， 是一个在很多场景下都能用得到的类库。

    编写Promise代码

创建流程

  • 使用new Promise(fn)返回一个Promise对象
  • 在fn中制定异步等处理:
    • 处理结果正常的情况，调用resolve(处理结果值)
    • 处理结果错误的话,调用reject(Error对象)

      创建Promise对象

最基本的情况，是使用new Promise()来创建Promise对象。也可以使用Promise.resolve(value)代替new Promise()快捷方法。比如:

  1. Promise.resolve(42);
  2. // 等价于
  3. new Promise(function(resolve) {
  4.     reslove(42);
  5. })

Thenable

就像我们有时称具有 .length 方法的非数组对象为Array like一样，thenable指的是一个具有 .then 方法的对象。

这种将thenable对象转换为promise对象的机制要求thenable对象所拥有的 then 方法应该和Promise所拥有的 then 方法具有同样的功能和处理过程，在将thenable对象转换为promise对象的时候，还会巧妙的利用thenable对象原来具有的 then 方法。变成了promise对象的话，就能直接使用 then 或者 catch, 比如:

  1. var promise = Promise.resolve($.ajax('/json/comment.json'));// => promise对象
  2. promise.then(function(value){
  3.    console.log(value);
  4. });

需要注意的是:即使一个对象具有 .then 方法，也不一定就能作为ES6 Promises对象使用。比如jQuery的Defeered Object的then方法机制与Promise不同。

其实在Promise里可以将任意个方法连在一起作为一个方法链（method chain），比如：

  1. aPromise.then(function taskA(value){
  2. // task A
  3. }).then(function taskB(vaue){
  4. // task B
  5. }).catch(function onRejected(error){
  6.     console.log(error);
  7. });

Promise.reject

Promise.reject(error)是和 Promise.resolve(value) 类似的静态方法，是 new Promise() 方法的快捷方式。

  1. Promise.reject(new Error("出错了"));
  2. // 等价于
  3. new Promise(function(resolve,reject){
  4.     reject(new Error("出错了"));
  5. });

Promise的同步or异步调用

先看下面这段代码:

  1. function onReady(fn) {
  2.     var readyState = document.readyState;
  3.     if (readyState === 'interactive' || readyState === 'complete') {
  4.         fn();
  5.     } else {
  6.         window.addEventListener('DOMContentLoaded', fn);
  7.     }
  8. }
  9. onReady(function () {
  10.     console.log('DOM fully loaded and parsed');
  11. });
  12. console.log('==Starting==');

这段代码会根据执行时DOM是否已经装载完毕来决定是对回调函数进行同步调用还是异步调用。这实际上会让我们的代码是同步还是一部产生混淆，所以为了解决这个问题，我们应该统一使用异步调用的方式:

  1. function onReady(fn) {
  2.     var readyState = document.readyState;
  3.     if (readyState === 'interactive' || readyState === 'complete') {
  4.         setTimeout(fn, 0);
  5.     } else {
  6.         window.addEventListener('DOMContentLoaded', fn);
  7.     }
  8. }
  9. onReady(function () {
  10.     console.log('DOM fully loaded and parsed');
  11. });
  12. console.log('==Starting==');

我们看到的 promise.then也属于此类，为了避免上述中同时使用同步、异步调用可能引起的混乱问题，Promise在规范上规定 Promise只能使用异步调用方式 ，修改代码如下:

  1. function onReadyPromise() {
  2.     return new Promise(function (resolve, reject) {
  3.         var readyState = document.readyState;
  4.         if (readyState === 'interactive' || readyState === 'complete') {
  5.             resolve();
  6.         } else {
  7.             window.addEventListener('DOMContentLoaded', resolve);
  8.         }
  9.     });
  10. }
  11. onReadyPromise().then(function () {
  12.     console.log('DOM fully loaded and parsed');
  13. });
  14. console.log('==Starting==');

Promise#catch

链式上的catch会捕获前面所有then的错误情况。其实这也是个语法糖:

  1. var promise = Promise.reject(new Error("message"));
  2. promise.catch(function (error) {
  3.     console.error(error);
  4. });
  5. // 等价于
  6. var promise = Promise.reject(new Error("message"));
  7. promise.then(undefined, function (error) {
  8.     console.error(error);
  9. });

提倡使用catch的原因还有一个就是: 使用promise.then(onFulfilled, onRejected) 的话, 在 onFulfilled 中发生异常的话，在 onRejected 中是捕获不到这个异常的。

然而实际上不管是 then 还是 catch 方法调用，都返回了一个新的promise对象。

Promise chain

通过then方法，我们可以将代码写成方法链的形式。比如:

  1. function taskA() {
  2.     console.log("Task A");
  3. }
  4. function taskB() {
  5.     console.log("Task B");
  6. }
  7. function onRejected(error) {
  8.     console.log("Catch Error: A or B", error);
  9. }
  10. function finalTask() {
  11.     console.log("Final Task");
  12. }
  14. var promise = Promise.resolve();
  15. promise
  16.     .then(taskA)
  17.     .then(taskB)
  18.     .catch(onRejected)
  19.     .then(finalTask);

chain的时候，如何传递参数？答案非常简单，那就是在 Task A 中 return 的返回值，会在 Task B 执行时传给它。因为return的值会由 Promise.resolve(return的返回值); 进行相应的包装处理。

多个Promise对象完成后统一处理

通过回调方式来进行多个异步调用

看代码:

  1. function getURLCallback(URL, callback) {
  2.     var req = new XMLHttpRequest();
  3.     req.open('GET', URL, true);
  4.     req.onload = function () {
  5.         if (req.status === 200) {
  6.             callback(null, req.responseText);
  7.         } else {
  8.             callback(new Error(req.statusText), req.response);
  9.         }
  10.     };
  11.     req.onerror = function () {
  12.         callback(new Error(req.statusText));
  13.     };
  14.     req.send();
  15. }
  16. // <1> 对JSON数据进行安全的解析
  17. function jsonParse(callback, error, value) {
  18.     if (error) {
  19.         callback(error, value);
  20.     } else {
  21.         try {
  22.             var result = JSON.parse(value);
  23.             callback(null, result);
  24.         } catch (e) {
  25.             callback(e, value);
  26.         }
  27.     }
  28. }
  29. // <2> 发送XHR请求
  30. var request = {
  31.         comment: function getComment(callback) {
  32.             return getURLCallback('http://azu.github.io/promises-book/json/comment.json', jsonParse.bind(null, callback));
  33.         },
  34.         people: function getPeople(callback) {
  35.             return getURLCallback('http://azu.github.io/promises-book/json/people.json', jsonParse.bind(null, callback));
  36.         }
  37.     };
  38. // <3> 启动多个XHR请求，当所有请求返回时调用callback
  39. function allRequest(requests, callback, results) {
  40.     if (requests.length === 0) {
  41.         return callback(null, results);
  42.     }
  43.     var req = requests.shift();
  44.     req(function (error, value) {
  45.         if (error) {
  46.             callback(error, value);
  47.         } else {
  48.             results.push(value);
  49.             allRequest(requests, callback, results);
  50.         }
  51.     });
  52. }
  53. function main(callback) {
  54.     allRequest([request.comment, request.people], callback, []);
  55. }
  56. // 运行的例子
  57. main(function(error, results){
  58.     if(error){
  59.         return console.error(error);
  60.     }
  61.     console.log(results);
  62. });

缺点:

  • 需要显示进行异常处理
  • 为了不让嵌套层次太深，需要一个对request进行处理的函数
  • 到处都是回调函数

    使用Promise#then同时处理多个异步请求

  1. function getURL(URL) {
  2.     return new Promise(function (resolve, reject) {
  3.         var req = new XMLHttpRequest();
  4.         req.open('GET', URL, true);
  5.         req.onload = function () {
  6.             if (req.status === 200) {
  7.                 resolve(req.responseText);
  8.             } else {
  9.                 reject(new Error(req.statusText));
  10.             }
  11.         };
  12.         req.onerror = function () {
  13.             reject(new Error(req.statusText));
  14.         };
  15.         req.send();
  16.     });
  17. }
  18. var request = {
  19.         comment: function getComment() {
  20.             return getURL('http://azu.github.io/promises-book/json/comment.json').then(JSON.parse);
  21.         },
  22.         people: function getPeople() {
  23.             return getURL('http://azu.github.io/promises-book/json/people.json').then(JSON.parse);
  24.         }
  25.     };
  26. function main() {
  27.     function recordValue(results, value) {
  28.         results.push(value);
  29.         return results;
  30.     }
  31.     // [] 用来保存初始化的值
  32.     var pushValue = recordValue.bind(null, []);
  33.     return request.comment().then(pushValue).then(request.people).then(pushValue);
  34. }
  35. // 运行的例子
  36. main().then(function (value) {
  37.     console.log(value);
  38. }).catch(function(error){
  39.     console.error(error);
  40. });

这种方法也不是我们期望的，和上面的回调函数风格相比:

  • 可以直接使用 JSON.parse 函数
  • 函数 main() 返回promise对象
  • 错误处理的地方直接对返回的promise对象进行处理

    Promise.all

Promise.all 接收一个 promise对象的数组作为参数，当这个数组里的所有promise对象全部变为resolve或reject状态的时候，它才会去调用 .then方法。比如:

  1. function getURL(URL) {
  2.     return new Promise(function (resolve, reject) {
  3.         var req = new XMLHttpRequest();
  4.         req.open('GET', URL, true);
  5.         req.onload = function () {
  6.             if (req.status === 200) {
  7.                 resolve(req.responseText);
  8.             } else {
  9.                 reject(new Error(req.statusText));
  10.             }
  11.         };
  12.         req.onerror = function () {
  13.             reject(new Error(req.statusText));
  14.         };
  15.         req.send();
  16.     });
  17. }
  18. var request = {
  19.         comment: function getComment() {
  20.             return getURL('http://azu.github.io/promises-book/json/comment.json').then(JSON.parse);
  21.         },
  22.         people: function getPeople() {
  23.             return getURL('http://azu.github.io/promises-book/json/people.json').then(JSON.parse);
  24.         }
  25.     };
  26. function main() {
  27.     return Promise.all([request.comment(), request.people()]);
  28. }
  29. // 运行示例
  30. main().then(function (value) {
  31.     console.log(value);
  32. }).catch(function(error){
  33.     console.log(error);
  34. });

这样的优点是:

  • main中的处理流程非常清晰
  • Promise.all 接收 promise对象组成的数组作为参数
    Promise数组是同时开始执行的，then调用参数的结果之中的results顺序和传递的数组的顺序一致。并且调用then的时间由最后一个完成的异步操作决定。

Promise.race

它的使用方法和Promise.all一样，接收一个promise对象数组为参数。与all的区别就是：race只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理。但是Promise中的数组也还是会继续执行。但是then只接受第一个完成的Promise返回对象。

参考资料

原文: https://leohxj.gitbooks.io/front-end-database/content/javascript-asynchronous/use-promise.html