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

目录

• 1. 概述
• 2. 详论
• 3. 参考

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