再谈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");
});


打印
error
fail
resolve

天道酬勤，功不唐捐！