再談Promise

方法

構造函數

接受的參數是一個帶兩個Function參數的函數，實際的異步代碼編寫在這個函數里，成功后調用第一個參數，失敗調用第二個；

Promise.prototype.catch

當構造函數里調用到失敗的函數時，會執行該方法的參數，並傳遞錯誤信息；

Promise.prototype.then

當構造函數里調用到成功或者失敗的函數時，會執行該方法的參數，並傳遞結果；

Promise.all

並行執行接受的數組，全部同時執行，直到全部都執行完畢，回調成功。

Promise.race

並行執行接受的數組，全部同時執行，最快的一個執行完畢后，回調成功。

private foo(time: number, data: string): Promise<string> {
    return new Promise<string>((resolve: (value?: string)=> void, reject: (reason?: any) => void) => {
        setTimeout(() => {
            console.log("foo execute: " + data);
            resolve(data);
        }, time);
    });
}

Promise.race([this.foo(500, "1"), this.foo(300, "2"), this.foo(600, "3")]).then((value: string) => {
    console.log("ok " + value);
});

// 輸出如下：
// foo execute: 2
// ok 2
// foo execute: 1
// foo execute: 3

最快的執行后，后續的異步操作不會中斷，也會繼續執行。

Promise.reject

得到一個已經失敗的Promise對象，並且可以傳遞失敗消息；

Promise.resolve

得到一個已經成功的Promise對象，並且可以傳遞成功后的結果；

TypeScript下的Promise

TS下的Promise附帶了一個泛型類型，如下Promise<T>，這里的T表示會傳遞給resolve的參數類型。

Promise的細節

直接上一個實例，我們先編寫一個模擬的異步加載方法：

namespace Res {
    /**
     * 異步加載數據的方法
     */
    export function loadRes(url: string): Promise<ResInfo> {
        return new Promise<ResInfo>((resolve: (value?: ResInfo)=> void, reject: (reason?: any) => void) => {
            // 這里不使用實際的加載代碼，為了方便用 setTimeout 來模擬異步的加載操作
            setTimeout(() => {
                // 包含 err 字符串的地址都會加載失敗
                if (url.indexOf("err") != -1) {
                    reject("load error!");
                    return;
                }
                // 加載成功
                let info = new ResInfo();
                info.url = url;
                info.data = Math.random() + "";
                resolve(info);
            }, 500);
        });
    }
}

class ResInfo {
    url: string;
    data: any;
}

我們來看看下面的代碼：

Res.loadRes("http://xxx.xxx/common.zip").then((v) => {
    console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.6981821740164385"}
}).then((v) => {
    console.log(v); // undefined
});

我們發現then方法在不返回新的Promise的時候，繼續再次調用then方法，還是可以得到觸發，這個觸發在上一個then之后，但是已經取不到返回的值了。

如果希望第二個then也可以得到異步的返回值，可以這么寫：

Res.loadRes("http://xxx.xxx/common.zip").then((v) => {
    console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.7905235849704688"}
    return Promise.resolve(v);
}).then((v) => {
    console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.7905235849704688"}
});

直接返回值也可以讓第二個then取到值：

Res.loadRes("http://xxx.xxx/common.zip").then((v) => {
    console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.7905235849704688"}
    return v;
}).then((v) => {
    console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.7905235849704688"}
});

或者改變返回值：

Res.loadRes("http://xxx.xxx/common.zip").then((v) => {
    console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.6981821740164385"}
    return "hello";
}).then((v) => {
    console.log(v); // hello
});

可以通過判斷轉變為一個異常拋出：

Res.loadRes("http://xxx.xxx/common.zip").then((v) => {
    console.log(v); // ResInfo {url: "http://xxx.xxx/common.zip", data: "0.6981821740164385"}
    if (true) {
        return Promise.reject("error 1000");
    }
}).then((v) => {
    console.log(v); // 這里已經不會被執行到了
}).catch((err) => {
    console.log(err); // error 1000
});

async和await

async 的方法就可以看做一個封裝好的 Promise 對象，調用該方法就會立刻得到一個 Promise 對象，該方法返回的值是 then 的成功回調的參數；

當需要對一個 async 方法或者返回 Promise 對象的方法進行異步等待時，就要加上 await 關鍵字，同時加了 await 關鍵字的方法要變成用 async 修飾的方法；

如果不加 await 關鍵字，就要使用 then 方法來監聽異步的回調；

async 和 await 可以看做Promise的編寫語法糖；

下面直接上實例：

private async loadAll(): Promise<string> {
    console.log("加載前的初始化");
    await Res.loadRes("http://xxx.xxx/common.zip");
    console.log("加載通用資源成功");
    let info = await Res.loadRes("http://xxx.xxx/ui.zip");
    console.log("加載 " + info.url + "成功: " + info.data);
    await Res.loadRes("http://xxx.xxx/code.zip");
    console.log("最后一個資源加載成功");

    return "complete";
}

this.loadAll()
.then((result?: string) => {
    console.log("加載全部完畢: " + result);
})
.catch((reason?: any) => {
    console.log("加載失敗: " + reason);
});

實際上就是Promise的簡寫形式，也更方便閱讀和理解。

另外一些需要關注的細節

Promise的異步處理邏輯函數中立即調用resolve，是同步執行么？

我們來看下面的例子：

private foo() {
    return new Promise((r:Function)=>{
        console.log("2");
        return r("resolve");
    });
}

console.log("1");
this.foo().then(()=>{
    console.log("3");
});
console.log("4");

輸出：

1
2
4
3

從輸出來看調用了resolve之后，並沒有立即觸發then的回調，而是繼續執行下面的方法（輸出了4），之后才調用了then的回調（輸出了3），所以立即返回后，並不是同步立即執行then的回調，但then的回調並沒有等到下一個刷新（即下一幀）才調用，而是在本幀就會調用，只是調用放在本幀的稍后的時間里進行；

多個其它地方的then方法可以同時等待同一個Promise么？

目前為止，我們都是等待一個新創建的Promise，如果多個方法都在等待同一個Promise會怎么樣，我們看看下面的例子：

private _p: Promise<any>;

private foo1() {
    return this._p;
}

async foo2() {
    await this.foo1();
    console.log("foo2 1");
    await this.foo1();
    console.log("foo2 2");
    await this.foo1();
    console.log("foo2 3");
}

async foo3() {
    await this.foo1();
    console.log("foo3 1");
    await this.foo1();
    console.log("foo3 2");
}

this._p = new Promise((r:Function)=>{
    setTimeout(()=>{
        console.log("異步執行完畢");
        return r("data");
    },1000);
});

this.foo2().then(()=>{console.log("foo2 e");});
this.foo3().then(()=>{console.log("foo3 e");});

輸出如下：

異步執行完畢
foo2 1
foo3 1
foo2 2
foo3 2
foo3 e
foo2 3
foo2 e

我們發現多個方法可以等待同一個Promise，該Promise成功或者失敗時，所有等待該Promise的方法都會繼續執行。

如果await一個已經執行完成的Promise時，會立即得到結束的執行。

Promise只會執行第一次的回調

當我500毫秒時，調用reject，1000毫秒時，調用resolve，then里面的方法是不會執行的。

function foo() {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            console.log("error");
            reject();
        }, 500);
        setTimeout(()=>{
            console.log("resolve");
            resolve();
        }, 1000);
    });
}

foo().then(()=>{
    console.log("success");
})
.catch(()=>{
    console.log("fail");
});