经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript异步编程3——Promise的链式使用
来源:cnblogs  作者:charlee44  时间:2021/5/6 17:56:31  对本文有异议

??概述

在上一篇文章《JavaScript异步编程2——结合XMLHttpRequest使用Promise》中,简要介绍了Ajax与Promise的结合使用。这样,我们就有了两个异步操作的例子:读取一个json文件;通过一个地址加载图像。考虑一下,如果存在两个异步操作,它们需要在执行一个操作之后再执行另外一个操作(例如在这里,我们把图像地址存储在json文件中,通过访问json中的地址来加载图像),该如何做呢?

??详论

1??回调地狱

为了实现上面说到的功能,假如我们不使用Promise,直接使用回调函数当然也可以实现:

  1. $(function () {
  2. var url = "./1.json";
  3. var req = new XMLHttpRequest();
  4. req.open('GET', url);
  5. req.onload = function () {
  6. if (req.status == 200) {
  7. var imgJson = JSON.parse(req.response);
  8. var img = new Image();
  9. img.onload = function () {
  10. $(img).appendTo($('#container'));
  11. };
  12. img.onerror = function () {
  13. throw new Error("Load Image Error!");
  14. }
  15. img.src = imgJson[0];
  16. } else {
  17. throw new Error(req.statusText);
  18. }
  19. };
  20. req.onerror = function () {
  21. throw new Error("Network Error");
  22. };
  23. req.send();
  24. });

可以看到这里我们使用了两层的嵌套回调,加载图像的异步操作在XMLHttpRequest访问请求的响应回调中实现,这样可以让访问json请求结束了之后立刻去访问图像操作。那么更进一步来假设,需要加入一个行为,在加载图像完成之后再进行操作呢(例如进行图像处理)?这样的话我们就得再加一层回调函数的嵌套。这样,程序由上至下,由前往后的顺序就会变成由外而内——最直观的不便就是,"{}"层级变得多了,程序会变得难以阅读——而这,就是所谓的“回调地狱”了。

2??Promise实现

为了解决“回调地狱”的问题,Promise应运而生。在之前的文章中说过,Promise的目的,是希望异步行为能像同步操作一样遵循顺序,从而避免嵌套回调。也就是说,只要在每次的成功实现,也就是then()方法中,再次返回新的Promise对象,就可以再次调用该Promise对象的then()方法,这样异步行为也就可以像同步操作那样,按顺序组合起来了。并且这个组合是链式的,从前到后的,从而避免了多层嵌套:

  1. $(function () {
  2. function get(url) {
  3. return new Promise(function (resolve, reject) {
  4. var req = new XMLHttpRequest();
  5. req.open('GET', url);
  6. req.onload = function () {
  7. //即使是404也会进入这个相应函数,所以需要检测状态
  8. if (req.status == 200) {
  9. //完成许诺,返回响应文本
  10. resolve(req.response);
  11. } else {
  12. //完成未完成,返回错误
  13. reject(Error(req.statusText));
  14. }
  15. };
  16. // 发生错误时的相应函数
  17. req.onerror = function () {
  18. reject(Error("Network Error"));
  19. };
  20. // 发送请求
  21. req.send();
  22. });
  23. }
  24. function getImg(uri){
  25. return new Promise(function(resolve, reject){
  26. var img = new Image();
  27. img.onload = function () {
  28. resolve(img);
  29. };
  30. img.onerror = function () {
  31. reject(Error("Load Image Error!"));
  32. }
  33. img.src = uri;
  34. });
  35. }
  36. var addressUri = "./1.json";
  37. get(addressUri).then(function (response) {
  38. var imgJson = JSON.parse(response);
  39. return getImg(imgJson[0]);
  40. }, function (error) {
  41. console.error("Failed!", error);
  42. }).then(function(img){
  43. $(img).appendTo($('#container'));
  44. }, function(error){
  45. console.error("Failed!", error);
  46. });
  47. });

??参考

  1. JavaScript Promises: An introduction

原文链接:http://www.cnblogs.com/charlee44/p/14727875.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号