js中Promise的易懂的介绍

Promise类：

Promise是一个ECMA6提供的类
可以通过 它的构造函数 来新建一个Promise实例

构造函数

Promise提供一个构造函数，它：

• 接受一个executor:Function作为参数，executor指定
  • Promise实例要执行的异步操作
  • Promise实例如何进行状态转换。
• 返回创建Promise实例

泛型

Promise类带有一个泛型类型，类似：

class Promise<T>{
    …
 }

这个泛型类型是Promise实例的“返回值”的类型
每个Promise实例指定这个泛型类型是什么

返回值

Promise类带有一个实例变量作为返回值，类似：

class Promise<T>{
    constructor(...) {
        this.promiseRet: T;
    }
}

可以没有返回值，也就是：

let p:Promise<void> = new Promise(...);

resolve()与reject()

Promise类带有resolve与reject方法，它们：

• 接受T类型的参数
• 将Promise实例的状态从pending转换为resolve/reject
• 将参数值设置为Promise实例的“返回值”
• 没有返回

类似于

class Promise<T>{
    …
    function resolve(ret:T):void {
       if(this.status == PENDING) {
          this.status = RESOLVE;
       }
       this.promiseRet = ret;
    }
 }

如何new一个Promise实例：

调用Promise构造函数：

type executor= (resolve: Function, reject: Function) => boolean;
let p:Promise<aActualType> = new Promise(executor);

Promise的构造函数接受一个 回调函数（一般称为executor）作为参数，来构建一个Promise实例

注意此处的同步异步

这个executor函数是同步的，也就是说在new Promise(executor)时，同时开始运行executor，比如：

console.log("start");
let syncPromise:Promise<void> = new Promise(()=>{
    console.log("1");
})
console.log("end");
/* 输出为：
start
1
end
*/

只有在使用异步函数（如setTimeout）时，该语句及其之后的代码才会转变为异步的，比如：

console.log("before promise");
let syncPromise:Promise<string> = new Promise((resolve, reject)=>{
    console.log("in promise")
    resolve("ret");
    console.log("in promise, after resolve()");
    setTimeout(console.log, 1, "in promise, after set time out 1ms");
})
console.log("after promise");
/* 输出为：
before promise
in promise
in promise, after resolve()
after promise
in promise, after set time out 1ms
*/

Promise的executor：

executor函数接受两个可选参数：(resolve, reject)
（也就是Promise中定义的那两个方法）并：

• 在操作成功时调用 resolve()，传递成功时的 ret:T
• 在操作失败时调用reject()，传递失败时的ret:T。

new Promise(()=>{})样例：

let promiseInstance:Promise<string> = new Promise(
    // executor 以箭头函数形式表达
    (resolve, reject) => {
       // 等待1000ms，使用resolve()，将promiseInstance的状态设为resolve，返回值设为”success”
       setTimeout(resolve, 1000, "success");
       // 没有失败的情况，不用reject()。
    }
 )

如何处理一个settled的promiseInstance：

不管是从pending变resolve还是reject，这个Promise实例都“settle”了。它的异步操作结束，状态不能再改变。
从上面可以看出，我们保存了promiseRet，但却还不知道怎么拿到这个返回值。
Promise类对此提供了.then()和.catch()这两个方法。

.then()

.then()

• 返回一个新的Promise实例。
• 接受函数onResolve()和onReject()作为两个可选参数，分别在上一个promise转换为resolve或reject状态之后进行。不过现在基本只使用onResolve()，并用promise.catch()语法糖来替代onReject()。
  • 这两个函数都接受一个参数，也就是上一个Promise的“返回值”
  • 这两个函数的返回 会被设置为 新生成的Promise的“返回值”

比如：

 let promiseB: Promise<typeB> = promiseA.then(
    // onResolve()函数，用箭头函数形式表示。接受promiseA的返回值作为参数。
    (retA: typeA)=>{
       return retB: typeB;
       //这个返回值retB就是promiseB的“返回值”。
       //在顺利return的情况下，promiseB的状态会是resolve。
       //如果抛出异常或显式reject()，则是reject。
    }
    //省略onReject()，可换用.catch处理。
 )

执行顺序为：promiseA -> promiseB

例子：

/* 1. 请写出一个Promise的基本结构，
 包括executor函数，resolve和reject参数，
 以及then和catch方法。*/
let promise: Promise<string> = new Promise(
    (resolve, reject) => {
        setTimeout(() => {
            console.log("hello");
            resolve("success");
        }, 1000)
    }
)


promise.then((ret) => {
    console.log(ret);
})


promise.catch((ret) => {
    console.log("This should never happen. ret = " + ret);
})


/* 2. 请写出一个使用Promise封装的异步函数，
 该函数接受一个数字n作为参数，返回一个Promise对象，
 该对象在n秒后resolve一个字符串"Hello"。*/
// helloAfterN(3);
function helloAfterN(n: number): Promise<string> {
    let promise: Promise<string> = new Promise(
        (resolve)=>{
            setTimeout(resolve, n*1000, "Hello");
        }
    );
    return promise;
}

有用的参考连接：

Promise的具体实现见这篇
这是菜鸟对Promise的介绍。他的介绍也比较清楚
不像好多别的教材都在把Promise类、Promise实例、Promise的构造函数、Promise的init函数混成一个东西说。

用ts来写Promise也能理解的比较清楚。js没有类型简直是没有天理违反人伦啊啊