JavaScript异步编程3——Promise的链式使用

  • A+
所属分类:Web前端
摘要

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

?概述

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

?详论

1️⃣回调地狱

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

$(function () {     var url = "./1.json";      var req = new XMLHttpRequest();     req.open('GET', url);      req.onload = function () {                 if (req.status == 200) {             var imgJson = JSON.parse(req.response);                               var img = new Image();             img.onload = function () {                          $(img).appendTo($('#container'));                     };              img.onerror = function () {                 throw new Error("Load Image Error!");             }              img.src = imgJson[0];           } else {                        throw new Error(req.statusText);         }     };      req.onerror = function () {         throw new Error("Network Error");     };      req.send(); }); 

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

2️⃣Promise实现

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

$(function () {     function get(url) {                return new Promise(function (resolve, reject) {                   var req = new XMLHttpRequest();             req.open('GET', url);              req.onload = function () {                 //即使是404也会进入这个相应函数,所以需要检测状态                 if (req.status == 200) {                     //完成许诺,返回响应文本                     resolve(req.response);                 } else {                     //完成未完成,返回错误                     reject(Error(req.statusText));                 }             };              // 发生错误时的相应函数             req.onerror = function () {                 reject(Error("Network Error"));             };              // 发送请求             req.send();         });     }      function getImg(uri){         return new Promise(function(resolve, reject){             var img = new Image();             img.onload = function () {                 resolve(img);             };             img.onerror = function () {                 reject(Error("Load Image Error!"));             }             img.src = uri;         });        }        var addressUri = "./1.json";     get(addressUri).then(function (response) {         var imgJson = JSON.parse(response);              return getImg(imgJson[0]);               }, function (error) {         console.error("Failed!", error);     }).then(function(img){         $(img).appendTo($('#container'));      }, function(error){         console.error("Failed!", error);     });      }); 

?参考

  1. JavaScript Promises: An introduction