JavaScript异步编程4——Promise错误处理

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

在上一篇文章《JavaScript异步编程3——Promise的链式使用》中,通过Promise的链式使用,避免程序中多次嵌套回调(回调地狱)。根据前面的文章我们可以知道,Promise是基于状态的,成功/失败的状态会分别去处理相应的回调函数。一般而言,失败的状态我们希望能够捕获它,将它像异常(Error)一样处理。

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(),则是程序无论如何都会往下继续运行的。

3. 参考

  1. JavaScript Promises: An introduction