- A+
所属分类：Web前端
?概述
在上一篇文章《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); }); }); 
