Promise由浅到深宝典

dyyanewade
298 阅读6分钟

一、Promise 规范

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

这套规范最早诞生于前端社区，规范名称为Promise A+

该规范出现后，立即得到了很多开发者的响应

Promise A+ 规定：

  1. 所有的异步场景，都可以看作是一个异步任务，每个异步任务，在JS中应该表现为一个对象，该对象称之为Promise对象，也叫做任务对象

image.png

  1. 每个任务对象，都应该有两个阶段、三个状态

image.png

根据常理，它们之间存在以下逻辑：

  • 任务总是从未决阶段变到已决阶段，无法逆行
  • 任务总是从挂起状态变到完成或失败状态，无法逆行
  • 时间不能倒流，历史不可改写，任务一旦完成或失败，状态就固定下来，永远无法改变
  1. 挂起->完成，称之为resolve；挂起->失败称之为reject。任务完成时，可能有一个相关数据；任务失败时，可能有一个失败原因。

image.png

  1. 可以针对任务进行后续处理，针对完成状态的后续处理称之为onFulfilled，针对失败的后续处理称之为onRejected

image.png

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为任务失败的相关原因
  }
);

// 或者使用then\catch
pro.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

二、Promise 的链式调用

image.png

  1. then方法必定会返回一个新的Promise,可理解为后续处理也是一个任务

  2. 新任务的状态取决于后续处理：

  • 若没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据

  • 若有后续处理但还未执行，新任务挂起

  • 若后续处理执行了，则根据后续处理的情况确定新任务的状态

    • a) 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值
    • b) 后续处理执行有错，新任务的状态为失败，数据为异常数据
    • c) 后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致

练习1

// 下面代码的输出结果是什么
const pro1 = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve(1)
  },1000)
}

const pro2 = pro1.then(data=>{
  console.log(data);
  return data + 1
})

const pro3 = pro2.then(data=>{
  console.log(data);
})

// ①
console.log(pro1, pro2, pro3)

// ②
setTimeout(()=>{
  console.log(pro1,pro2,pro3)
},2000)

分析： 在第①步打印的时候

  • pro1后续有处理但是有个定时任务还未执行，此时pro1的状态pending挂起
  • pro2针对pro1的后续处理，毫无疑问pro2也只能挂起
  • pro3针对pro2的后续处理，毫无疑问pro3也只能挂起
promise状态返回值
pro1pending
pro2pending
pro3pending

1秒钟之后：

  • pro1的状态由pending --> fulfilled
  • pro2有针对pro1的完成做处理，pending --> fulfilled，输出1，后续处理没有错误，数据是他的返回值1+1=2
  • pro3取决于后续运行过程且没错，pending --> fulfilled，输出2
promise状态返回值
pro1fulfilled1
pro2fulfilled2
pro3fulfilledundefined

练习2

// 下面代码的输出结果是什么
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
})
  .then((data) => {
    throw 3;
    return data + 1;
  })
  .then((data) => {
    console.log(data);
  });
  
// pro1 pedding 
// pro2 pedding
// pro3 pedding

// pro1 fulfilled<1>
// pro2 rejected<3>
// pro3 rejected<3>

练习3

// 下面代码的输出结果是什么
new Promise((resolve, reject) => {
  resolve(1);
})
  .then((res) => {
    console.log(res);
    return new Error('2');
  })
  .catch((err) => {
    throw err;
    return 3;
  })
  .then((res) => {
    console.log(res);
  });

// pro1 rejected<1>
// pro2 rejected<Error(2)>
// pro3 rejected<Erroe(2)>
// pro4 rejected<Erroe(2)>

由于链式任务的存在，异步代码拥有了更强的表达力

// 常见任务处理代码

/*
 * 任务成功后，执行处理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 的静态方法

静态方法介绍

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

示例

/**
 * 根据页码获取学生数据，返回Promise
 * @param {Number} page 页码
 */
function fetchStudents(page) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.3) {
        reject(new Error(`网络错误！获取第${page}页数据失败！`));
        return;
      }
      // 模拟学生数据
      const stus = new Array(10).fill(null).map((d, i) => ({
        id: `NO.${(page - 1) * 10 + i + 1}`,
        name: `姓名${(page - 1) * 10 + i + 1}`,
      }));
      resolve(stus);
    }, Math.floor(Math.random() * 5000));
  });
}

利用 fetchStudents 函数，完成下面的练习

获取10个数组promise对象：

// fill 填充  map映射
const proms = new Array(10).fill(0).map((item,i) => fetchStudents(i+1))

console.log(proms)

image.png

  1. 获取1-10页的学生，最终按照页码的顺序合并成一个数组，任何一页的数据获取出现错误，则任务不再继续，打印错误消息
Promise.all(proms).then(result => {
  // flat() 方法创建一个新数组
  console.log("成功", result.flat())
}).catch(error =>{
  console.log("失败", error)
})
  1. 获取1-10页的学生，最终按照页码的顺序合并成一个数组，如果某些页码的数据获取失败，就不加入该数据即可
Promise.allSettled(proms).then(result => {
  result = result.filter(item => item.status === "fulfilled").map((it)=> it.value).flat();
  console.log(result)
})
  1. 获取1-10页的学生，打印最先获取到的数据，如果全部都获取失败，则打印所有的错误消息
Promise.any(proms).then(result => {
  console.log(result)
}).catch(err=>{
  console.log(err.errors)
})
  1. 获取1-10页的学生，输出最先得到的结果（有结果输出结果，有错误输出错误）
Promise.race(proms).then(result => {
  console.log(result)
}, err =>{
  console.log(err)
})

四、async 和 await

消除回调

有了Promise，异步任务就有了一种统一的处理方式

有了统一的处理方式，ES官方就可以对其进一步优化

ES7推出了两个关键字async和await，用于更加优雅的表达Promise

async

async关键字用于修饰函数，被它修饰的函数，一定返回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)
    })
  })
}

await也可以等待其他数据

async function method(){
  const n = await 1; // 等同于 await Promise.resolve(1)
}

如果需要针对失败的任务进行处理，可以使用try-catch语法

async function method(){
  try{
    const n = await Promise.reject(123); // 这句代码将抛出异常
    console.log('成功', n)
  }
  catch(err){
    console.log('失败', err)
  }
}

method(); // 输出： 失败 123
avatar
文章
阅读
粉丝