Promise 规范

Promise是一套专门处理异步场景的规范,它能有效的避免回调地狱的产生,使异步代码更加清晰、简洁、统一:

  1. 所有的异步场景,都可以看作是一个异步任务,每个异步任务,在JS中应该表现为一个对象,该对象称之为Promise对象,也叫做任务对象
  2. 每个任务对象,都应该有两个阶段、三个状态:

    • unsettled 未决阶段:挂起阶段(pending)
    • settled已决阶段::完成状态(fulfilled),失败状态:(rejected)
  • 任务总是从未决阶段变到已决阶段,无法逆行
  • 任务总是从挂起状态变到完成或失败状态,无法逆行
  • 时间不能倒流,历史不可改写,任务一旦完成或失败,状态就固定下来,永远无法改变.
  1. 挂起->完成,称之为resolve挂起->失败称之为reject。任务完成时,可能有一个相关数据;任务失败时,可能有一个失败原因。
  2. 可以针对任务进行后续处理,针对完成状态的后续处理称之为onFulfilled,针对失败的后续处理称之为onRejected

Promise API

ES6提供了一套API,实现了Promise A+规范:

// 创建一个任务对象,该任务立即进入 pending 状态
const pro = new Promise((resolve, reject) => {
  // 任务的具体执行流程,该函数会立即被执行
  // 调用 resolve(data),可将任务变为 fulfilled 状态, data 为需要传递的相关数据
  // 调用 reject(reason),可将任务变为 rejected 状态,reason 为需要传递的失败原因
});

pro.then(
  (data) => {
    // onFulfilled 函数,当任务完成后,会自动运行该函数,data为任务完成的相关数据
  },
  (reason) => {
    // onRejected 函数,当任务失败后,会自动运行该函数,reason为任务失败的相关原因
  }
);

catch方法: .catch(onRejected) = .then(null, onRejected),只处理失败,不处理成功

链式调用

  1. then方法必定会返回一个新的Promise
  2. 新任务的状态取决于后续处理:

    1. 若没有相关的后续处理,新任务的状态和前任务一致,数据为前任务的数据
    2. 若有后续处理但还未执行,新任务挂起。
    3. 若后续处理执行了,则根据后续处理的情况确定新任务的状态

      1. 后续处理执行无错,新任务的状态为完成,数据为后续处理的返回值
      2. 后续处理执行有错,新任务的状态为失败,数据为异常对象
      3. 后续执行后返回的是一个任务对象,新任务的状态和数据与该任务对象一致

由于链式任务的存在,异步代码拥有了更强的表达力,常见任务处理代码:

/*
 * 任务成功后,执行处理1,失败则执行处理2
 */
pro.then(处理1).catch(处理2)

/*
 * 任务成功后,依次执行处理1、处理2
 */
pro.then(处理1).then(处理2)

/*
 * 任务成功后,依次执行处理1、处理2,若任务失败或前面的处理有错,执行处理3
 */
pro.then(处理1).then(处理2).catch(处理3)

静态方法

方法名含义
Promise.resolve(data)直接返回一个完成状态的任务
Promise.reject(reason)直接返回一个拒绝状态的任务
Promise.all(任务数组)返回一个任务任务数组全部成功则成功任何一个失败则失败
Promise.any(任务数组)返回一个任务任务数组任一成功则成功任务全部失败则失败
Promise.allSettled(任务数组)返回一个任务任务数组全部已决则成功该任务不会失败
Promise.race(任务数组)返回一个任务任务数组任一已决则已决,状态和其一致

async 和 await

ES7推出了两个关键字asyncawait,用于更加优雅的表达Promise.

async

aytnc关键字用于修饰函数,被它修饰的函数,一定返回Promise.

async function method1(){
  return 1; // 该函数的返回值是Promise完成后的数据
}

method1(); // Promise { 1 }

async function method2(){
  return Promise.resolve(1); // 若返回的是Promise,则method得到的Promise状态和其一致
}

method2(); // Promise { 1 }

async function method3(){
  throw new Error(1); // 若执行过程报错,则任务是rejected
}

method3(); // Promise { <rejected> Error(1) }

await

await关键字表示等待某个Promise完成,它必须用于async函数中

async function method(){
  const n = await Promise.resolve(1);
  console.log(n); // 1
}

// 上面的函数等同于
function method(){
  return new Promise((resolve, reject)=>{
    Promise.resolve(1).then(n=>{
      console.log(n);
      resolve(1)
    })
  })
}