ES6 - Promise 的常用方法

Promise 对象用于表示一个异步操作最终的完成或失败，以及结果值。

在创建Promise时，创建者也不知道它的结果。

一个Promise有三种状态：pending、fufilled、rejected

Promise的创建

创建Promise时传入一个函数，函数的参数为resolve和reject两个处理函数。通常，在执行一些异步操作后，根据异步操作的结果，调用resolve或reject，改变promise的状态。

let promise1 = new Promise((resolve, reject) => {
    console.log("before setTimeout", timer)
    setTimeout(() => {
        console.log("before resolve", timer)
        let random = Math.random()
        if(random < 0.5){
           resolve(random)
        }
        else{
           reject(random)
        }
    }, 800)
})

Promise的链式调用

因为 Promise.prototype.then 和 Promise.prototype.catch 会返回一个Promise对象，所以Promise可以被链式调用。

Promise.prototype.then(onFulfilled, onRejected)

在then中的返回值，如果不是一个Promise类型的值，会被包装成一个立刻resolve的Promise，这个值就会是resolve传给下一个then的onFulfilled处理函数的参数。如果返回值是一个Promise，那么就执行这个Promise，等待其执行结果。

let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("resolve value ", 1)
        resolve(1)
    }, 100)
})

promise1.then(res =>{
     console.log("get value", res, "time: ", timer)
     console.log("return value ", res + 1, "time: ", timer)
     return res + 1
})
.then(res => {
     console.log("get value", res, "time: ", timer)
     console.log("return Promise", "time: ", timer)
     return new Promise((resolve, reject) => {
            console.log("new promise created", "time: ", timer)
            setTimeout(() => {
                  console.log("new promise resolved value ", res + 1, " time: ", timer)
                  resolve(res + 1)
            }, 500);
      })
})
.then(res => {
     console.log("get value", res, "time: ", timer)
     console.log("return value ", res + 1, "time: ", timer)
     return res + 1
})

Promise.prototype.catch(onRejected)

对应了Promise.prototype.then(..., onRejected)

 let promise1 = new Promise((resolve, reject) => {
     setTimeout(() => {
         console.log("reject value ", 1)
              reject(1)
     }, 100)
})

promise1.then(res => {
     console.log("get value", res, "time: ", timer)
})
.catch(res => {
     console.log("catch value in catch", res, "time: ", timer)
})

如果then中已经添加了onReject处理，那么不会触发catch；

如果then中在执行fulfilled是时候产生异常，那么会触发catch；

            promise1.then(res => {
                console.log("get value", res, "time: ", timer)
                return notExist // 触发异常
            })
            .catch(res => {
                console.log("in catch", res, "time: ", timer)
            })

Promise.race()

race会创建一个新的promise，以第一个结束的promise为准，第一个结束的成功就是成功，失败就是失败。

Promise.race([promise1, promise2, promise3]).then(res => {
       console.log("race end", res)
})
.catch(res => {
       console.log("race end in catch", res)
})

Promise.all()

all会创建一个新的promise，若有一个promise失败，那么就是失败，都成功，那么返回的是按顺序的结果数组。

Promise.all([promise1, promise2, promise3]).then(res => {
       console.log("all end", res)
})
.catch(res => {
       console.log("all end in catch", res)
})

Promise.resolve()

若参数为一个值，那么创建一个promise，并立刻resolve这个值

Promise.resolve(1).then(res => {
     console.log("resolved ", res)
})

若参数为一个promise，那么就返回这个promise

let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
         reject(2)
    }, 200);
})

Promise.resolve(promise1).then(res => {
    console.log("resolved ", res)
})
.catch(res => {
    console.log("rejected ", res)
})

Promise.reject()

Promise.reject(reason)

 

Promise 与 Async/Await 

有 async 关键字的 function 会返回一个 promise 对象，以函数的返回值调用 resolve，若函数发生异常，则调用reject；

await expression，如果expression是一个promise，就返回promise的处理结果，否则就返回值本身；

await 会暂停当前函数的执行，等待promise的结果，若promise正常执行，则resolve的值会作为await的结果；若promise失败，那么await会抛出异常；

有 async 关键字的 function 内可以使用 await 关键字；await 只在 async 方法里有效，在其他地方使用 await 会抛出异常；

线性调用：按顺序执行，按顺序结束

async function sequentialStart(){
    const slow = await resolveAfter2Seconds();
    console.log(slow); // 2. this runs 2 seconds after 1.

    const fast = await resolveAfter1Second();
    console.log(fast); // 3. this runs 3 seconds after 1.
}

并发调用：一起执行，按顺序结束

async function concurrentStart() {
  const slow = resolveAfter2Seconds(); // starts timer immediately
  const fast = resolveAfter1Second(); // starts timer immediately

  // 1. Execution gets here almost instantly
  console.log(await slow); // 2. this runs 2 seconds after 1.
  console.log(await fast); // 3. this runs 2 seconds after 1., immediately after 2., since fast is already resolved
}

// 等价
async function concurrentPromise() {
  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => {
    console.log(messages[0]); // slow
    console.log(messages[1]); // fast
  });
}

并行执行：一起执行，谁快谁先结束

async function parallelPromise() {
  resolveAfter2Seconds().then((message)=>console.log(message));
  resolveAfter1Second().then((message)=>console.log(message));
}

// 等效
async function parallel() {
  await Promise.all([
      (async()=>console.log(await resolveAfter2Seconds()))(),
      (async()=>console.log(await resolveAfter1Second()))()
  ]);
}