JS中的Promise 使用

回調函數真正的問題在於他剝奪了我們使用 return 和 throw 這些關鍵字的能力。而 Promise 很好地解決了這一切。

簡介：

ES6 原生提供了 Promise 對象。

所謂 Promise，就是一個對象，用來傳遞異步操作的消息。它代表了某個未來纔會知道結果的事件（通常是一個異步操作），並且這個事件提供統一的 API，可供進一步處理。

Promise 對象有以下兩個特點：

（1）對象的狀態不受外界影響。Promise 對象代表一個異步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失敗）。只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是 Promise 這個名字的由來，它的英語意思就是「承諾」，表示其他手段無法改變。

（2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise 對象的狀態改變，只有兩種可能：從 Pending 變爲 Resolved 和從 Pending 變爲 Rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對 Promise 對象添加回調函數，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。

有了 Promise 對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。此外，Promise 對象提供統一的接口，使得控制異步操作更加容易。

Promise 也有一些缺點。首先，無法取消 Promise，一旦新建它就會立即執行，無法中途取消。其次，如果不設置回調函數，Promise 內部拋出的錯誤，不會反應到外部。第三，當處於 Pending 狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

Promise 構造函數接受一個函數作爲參數，該函數的兩個參數分別是 resolve 方法和 reject 方法。

如果異步操作成功，則用 resolve 方法將 Promise 對象的狀態，從「未完成」變爲「成功」（即從 pending 變爲 resolved）；

如果異步操作失敗，則用 reject 方法將 Promise 對象的狀態，從「未完成」變爲「失敗」（即從 pending 變爲 rejected）。
模板

```
new Promise(function (resolve, reject) {
 resolve(someValue);
 });

寫成

Promise.resolve(someValue);

例：

export async function getNick(obj) {
    return new Promise(async(resolve, reject) => {
        let nickpy = '';
        let nick = '';
        let gnick = '';
        if (obj.groupUserNick && obj.groupUserNick !== '') {
            nickpy = pinyin(obj.groupUserNick, {
                style: pinyin.STYLE_NORMAL
            });
            nick = obj.groupUserNick;
            gnick = obj.groupUserNick;
        } else {
            let info = await UserInfo.getInfo(obj.uid, false, false);
            if(info && info.baseInfo && info.baseInfo.nick){
                nickpy = pinyin(info.baseInfo.nick, {
                    style: pinyin.STYLE_NORMAL
                });
                nick = info.baseInfo.nick;
                gnick = '';
            }
        }
        resolve({
            uid: obj.uid,
            nickpy: nickpy.join(''),
            nick: nick,
            gnick: gnick,
            position: obj.position,
            join: obj.join,
            silentState: obj.silentState
        });
    });
}

進階：

promise.all()的使用
注：處理一個 promise 的 map 集合。只有有一個失敗，所有的執行都結束

  let infos = await Promise.all(group_list.map((v) => {
        return getNick(v);
    }));

export async function sortGroupMembersByAlphabet(group_list, filter) {
    filter = filter.toUpperCase();

    let infos = await Promise.all(group_list.map((v) => {
        return getNick(v);
    }));
    infos.sort((a, b) => {
        let pa = a && a.nickpy || '';
        let pb = b && b.nickpy || '';

        return pa.toUpperCase() > pb.toUpperCase();
    });

    let list = {};

    infos.forEach((v) => {
        let skip = (v === undefined);
        let py = v && v.nickpy || '';
        let nick = v && v.nick || '';
        if (!skip && filter !== '') {
            if (py.toUpperCase().indexOf(filter) === -1 && nick.toUpperCase().indexOf(filter) === -1) {
                skip = true;
            }
        }

        if (!skip) {
            let index = '#';

            if (py[0]) {
                index = py[0].toUpperCase();
                if (index < 'A' || index > 'Z') {
                    index = '#';
                }
            }

            if (list[index] === undefined) {
                list[index] = [v];
            } else {
                list[index].push(v);
            }
        }
    });

    return list;
}

總結：當需要取大量用戶數據的時候，使用promise.all()來處理的時候，相當於同時去取這些數據，如果裏面有一條出問題，則全部不返回。