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