- A+
所属分类：Web前端
1. 概述
在上一篇文章《JavaScript异步编程3——Promise的链式使用》中，通过Promise的链式使用，避免程序中多次嵌套回调（回调地狱）。根据前面的文章我们可以知道，Promise是基于状态的，成功/失败的状态会分别去处理相应的回调函数。一般而言，失败的状态我们希望能够捕获它，将它像异常(Error)一样处理。
2. 详论
Promise的then()方法有两个参数，一个是成功的回调函数，一个是失败的回调函数。可以将失败的回调函数这个参数省略掉，而使用Promise的catch()方法，捕获失败的异常。例如，我们把上一篇文章中的例子改进一下：
$(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]); }).catch(function (error) { console.error("Failed!", error); }).then(function(img){ $(img).appendTo($('#container')); }).catch(function(error){ console.error("Failed!", error); }); }); 改进前与改进后的程序处理流程很相似，但是还是有细微的差别。前者通过Promise的then()处理异常，只会运行功能的回调函数和失败的回调函数其中的一个；后者通过catch()处理异常，则更加像JavaScript的try/catch，在try{}中发生的错误会立即转到catch{}块。这样的话，就很容易实现类似于try/catch异常操作的的非阻塞异步版本：
$(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]); }).then(function(img){ $(img).appendTo($('#container')); }).catch(function(error){ console.error("Failed!", error); }).then(function(){ alert("图片加载完成！"); }); }); 在上面这个改进的例子中，第一个then()和第二个then()中如果存在错误，就会将异常转到catch()中，而第三个then()，则是程序无论如何都会往下继续运行的。
