為什么使用Promise

如果新接觸 Promise 的話，在網上能找到很多介紹 Promise 及其使用的文章（比如：ECMAScript 6 入門 / Promise 對象），這里就不贅述了，簡而言之就是用來處理異步調用的一大利器。

微信小程序的API都可以傳入函數 success，fail 和 complete 來實現異步回調。

樣例一

// 顯示”載入中”，在一秒后消失
wx.showLoading({
    title: "載入中",
    success: function () {
        setTimeout(function () {
            wx.hideLoading()
        }, 1000)
    },
    fail: function(){},
    complete: function(){}
});

原生的 success，fail 和 complete 已能夠滿足基本的異步回調了，但是如果遇到多個連續的阻塞任務，會造成多層嵌套（如樣例二所示），就很奔潰。

樣例二

// 顯示“保存中”，一秒后隱藏，半秒后顯示“載入中”，一秒后隱藏
wx.showLoading({
    title: "保存中",
    success: function () {
        setTimeout(function () {
            wx.hideLoading({
                success: function () {
                    setTimeout(function () {
                        wx.showLoading({
                            title: "載入中",
                            success: function () {
                                setTimeout(function () {
                                    wx.hideLoading()
                                },1000)
                            }
                        })
                    }, 500)
                }
            })
        }, 1000)
    }
})

上面的例子有七個阻塞任務：顯示“保存中”，停頓一秒，隱藏，停頓半秒，顯示“載入中”，停頓一秒，隱藏。從直覺上來思考，這些任務應該是以隊列的形式存在，一個完成了再開始下一個，而非層層嵌套，這也是使用Promise的一大原因，可以鏈式調用。

上面的例子如果用Promise封裝之后的API來寫，看起來就非常直觀（樣例三）

樣例三

wsAPI.taskSequence()
    .then(() => wsAPI.showLoading({title: "保存中"}))
    .then(() => wsAPI.sleep(1000))
    .then(() => wsAPI.hideLoading())
    .then(() => wsAPI.sleep(500))
    .then(() => wsAPI.showLoading({title: "載入中"}))
    .then(() => wsAPI.sleep(1000))
    .then(() => wsAPI.hideLoading())
    .then(() => console.log("done"))

注： (A)=>{B} 是 ES6 的箭頭函數，相當于 function(A){B}，箭頭函數不用顯式 return。

比如 () => 5 就會 return 5

console.log((() => 5)()) // 5

封裝實現

wsAPI的源代碼實現如下：

let nullFn = () => {
};
function IllegalAPIException(name) {
    this.message = "No Such API [" + name + "]";
    this.name = 'IllegalAPIException';
}
let services = {
    sleep: (time) => {
        return new Promise(function (resolve, reject) {
            setTimeout(resolve, time);
        })
    },
    stop: () => {
        return new Promise(function (resolve, reject) {
        })
    },
    taskSequence: () => {
        return new Promise(function (resolve, reject) {
            resolve()
        })
    }
};
export let wsAPI = new Proxy(services, {
    get: function (target, property) {
        if (property in target) {
            return target[property];
        } else if (property in wx) {
            return (obj) => {
                return new Promise(function (resolve, reject) {
                    obj = obj || {};
                    obj.success = (...args) => {
                        resolve(...args)
                    };
                    obj.fail = (...args) => {
                        reject(...args);
                    };
                    obj.complete = nullFn;
                    wx[property](obj);
                });
            }
        } else {
            throw new IllegalAPIException(property);
        }

    }
});

wsAPI 用 Proxy（ECMAScript 6 入門 / Proxy）重新封裝了 wx 的所有API。并新增了 sleep ，stop 和 taskSequence。sleep 用于阻塞一段時間；taskSequence 是一個空的 Promise，讓代碼看起來更整齊美觀，可讀性更好（樣例四）；stop 用于停止任務序列進行下去（樣例五）

樣例四

// taskSequence
wsAPI.taskSequence()
    .then(() => wsAPI.showLoading({title: "保存中"}))
    .then(() => wsAPI.sleep(1000))
    .then(() => wsAPI.hideLoading())
    .then(() => wsAPI.sleep(500))
    .then(() => wsAPI.showLoading({title: "載入中"}))
    .then(() => wsAPI.sleep(1000))
    .then(() => wsAPI.hideLoading())
    .then(() => console.log("done"))

// 沒有 taskSequence，第一個promise就和下面的不對齊
wsAPI.showLoading({title: "保存中"})
    .then(() => wsAPI.sleep(1000))
    .then(() => wsAPI.hideLoading())
    .then(() => wsAPI.sleep(500))
    .then(() => wsAPI.showLoading({title: "載入中"}))
    .then(() => wsAPI.sleep(1000))
    .then(() => wsAPI.hideLoading())
    .then(() => console.log("done"))

樣例五

wsAPI.taskSequence()
    .then(() => wsAPI.showModal({title: "保存", content: "確定保存？"}))
    .then(res => {
        if (!res.confirm) {
            return wsAPI.stop();
        }
    })
    .then(() => console.log("to save"))
    .then(() => wsAPI.showLoading({title: "保存中"}))
    .then(() => wsAPI.sleep(1000))
    .then(() => wsAPI.hideLoading())
    .then(() => console.log("done"))