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

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
posted @ 2021-05-04 11:05  charlee44  阅读(113)  评论(0编辑  收藏  举报