《JavaScript应用程序设计》一一2.18 Promises与Deferreds

简介:

本节书摘来华章计算机出版社《JavaScript应用程序设计》一书中的第2章,第2.18节,作者:Eric Elliott 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.18 Promises与Deferreds

Promises作为一个对象,维护着成功与失败两个回调函数队列。与在异步/同步操作结束后执行的回调函数有所不同,你可以在异步操作的结尾处返回一个包含了一组回调函数的Promises。
Promises能够让你了解当前异步操作的进行状态,是在等待中,还是已完成,具体完成进度是多少。在整个过程中随时都可以向Promises中添加新的回调函数,当异步操作结束时,Promises会被正确解析,此时标识为成功的回调函数队列会被批量执行。
受CommonJS规范Promises/A的启发,jQuery实现了Promises并将这一规范推广至了JavaScript社区。jQuery使用Promises管理自己内部(包括Ajax请求在内)的异步任务队列,事实上,早在jQuery1.5中,所有Ajax方法执行后均会返回一个Promises,来看看它是如何工作的。

var whenDataFetched = $.getJSON(
  'https://graph.facebook.com/jsapplications'
);

asyncTest('Ajax promise API', function () {
  whenDataFetched
    .done(function (response) {
      ok(response,
        'The server returned data.');
      start();
    })
    .fail(function () {
      ok(true,
        'There was an error.');
      start();
    });
});

这个例子展示了,使用Ajax请求去获取“Programming JavaScript Applications”页面的元数据,因为所有jQuery中的Ajax辅助函数都会返回一个Promises,所以,你可以在whenDataFetched.done()中追加你的成功回调函数。
Promises与回调函数间的区别在于,Promises是调用者返回的一个对象,而不是传入调用者随后被执行的一个函数。Promises对象支持在异步操作过程中随时添加新的回调函数,并且会将回调函数彼此间的代码逻辑隔离开,所以使用Promises时回调函数并不一定要在异步操作开始前就传入。
deferred对象包含了一组方法,它被用来管理控制Promises。jQuery的Deferred()方法返回了一个与Promises功能极为类似的对象,这个对象上还拥有resolve()与reject()方法,这两个方法可以触发相应队列中的回调函数。假设你出于灵活性的考虑,想对现有的setTimeout()方法做改造,你想让它随时都可以接受回调函数的传入,而并不是仅能在首次定时调用时添加回调,你可以使用deferred对象来实现这个改造。

var timer = function timer(delay) {
  var whenTimedOut = $.Deferred(),
    promise = whenTimedOut.promise();

  promise.cancel = function (payload) {
    whenTimedOut.reject(payload);
  };

  setTimeout(function () {
    whenTimedOut.resolve();
  }, delay);

  return promise;
};

asyncTest('Deferred', function () {
  var startTime = new Date(),
    delay = 30,
    afterTimeout = 50,
    cancelTime = 100,
    myTimer = timer(delay),
    cancelTimer = timer(cancelTime);

  expect(4);

  myTimer.done(function () {
    ok(true,
      'First callback fired.');
  });

  myTimer.done(function () {
    var now = new Date();
    ok((now - startTime) > delay,
      'Delay works.'
      );
  });

  setTimeout(function () {
    ok(true,
      'Fires after timeout expires.');
  }, afterTimeout);

  setTimeout(function () {
    start();
  }, afterTimeout + 20);

  cancelTimer
    .done(function () {
      ok(false,
        'A canceled timer should NOT run .done().');
    })
    .fail(function () {
      ok(true,
        'A canceled timer calls .fail().');
    })
    .cancel();
});

Promises特别适用于那些有着一系列复杂调用序列的异步操作,因为往往在发起新的数据请求之前必须完成对多个数据源的请求。
回调函数会使得代码嵌套逻辑变得越来越深,但拥有了Promises,我们可以在任意数量的Promises对象被解析之后再决定下一步操作,下面是新timer()函数的应用:

var a = timer(60),
  b = timer(70),
  c = timer(40),
  tasks = [a, b, c];

asyncTest('Multiple dependencies.', function () {
  $.when(a, b, c).done(function () {
    ok(true, 'Runs when all promises resolve');
    start();
  });
});
相关文章
|
5月前
|
JavaScript 前端开发
如何减少Node.js应用中的全局变量?
如何减少Node.js应用中的全局变量?
351 133
|
5月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
316 69
|
2月前
|
存储 监控 JavaScript
基于布隆过滤器的 Node.js 算法在局域网电脑桌面监控设备快速校验中的应用研究
本文探讨了布隆过滤器在局域网电脑桌面监控中的应用,分析其高效空间利用率、快速查询性能及动态扩容优势,并设计了基于MAC地址的校验模型,提供Node.js实现代码,适用于设备准入控制与重复数据过滤场景。
94 0
|
28天前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
159 3
|
2月前
|
资源调度 负载均衡 JavaScript
使用PM2工具部署Vue.js应用于服务器
以上步骤完成之后,你就成功利⽤ PM⼆工具将 Vuejs 应⽰程序部署至服 务 器,并且配合反向代理实现了高效稳定访问及负载均衡功能。
120 0
|
6月前
|
前端开发 搜索推荐 JavaScript
如何通过DIY.JS快速构建出一个DIY手机壳、T恤的应用?
DIY.JS 是一款基于原生 Canvas 的业务级图形库,专注于商品定制的图形交互功能,帮助开发者轻松实现个性化设计。适用于 T 恤、手机壳等多种商品场景。它自带丰富功能,无需从零构建,快速集成到项目中。通过创建舞台、添加模型、定义 DIY 区域和添加素材四个步骤即可完成基础用法。支持在线演示体验,文档详细,易上手。
228 57
|
5月前
|
监控 算法 JavaScript
公司局域网管理视域下 Node.js 图算法的深度应用研究:拓扑结构建模与流量优化策略探析
本文探讨了图论算法在公司局域网管理中的应用,针对设备互联复杂、流量调度低效及安全监控困难等问题,提出基于图论的解决方案。通过节点与边建模局域网拓扑结构,利用DFS/BFS实现设备快速发现,Dijkstra算法优化流量路径,社区检测算法识别安全风险。结合WorkWin软件实例,展示了算法在设备管理、流量调度与安全监控中的价值,为智能化局域网管理提供了理论与实践指导。
150 3
|
6月前
|
存储 JavaScript 前端开发
|
7月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~