logo

JavaScript详解 — Promise

2023-03-08 下午前端 145 次浏览1条评论

Promise规范

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

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

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

Promise A+规定：

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

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

  1. 挂起->完成，称为 resolve,挂起->失败称之为 reject。任务完成时，可以有一个相关数据；任务失败时，可能有一个失败原因；

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

Promise API

ES6提供了一套API，实现了Promise A+规范。

基本使用如下：

const promise = new Promise((resolve,reject)=>{
	//成功
	resolve(data)
	//失败
	reject(reason)
})
promise.then((data)=>{
	//onFulfilled
},(reason)=>{
    //onRejected
})

catch方法

.catch(onRejected) === .then(null,onRejected)

小案例：

const pro = new Promise((resolve, reject) => {
  console.log("开始短跑");
  const duration = Math.floor(Math.random() * 3000);
  setTimeout(() => {
    if (Math.random() > 0.5) {
      console.log("短跑结束");
      resolve(duration);
    } else {
      reject("脚扭伤了");
    }
  }, duration);
});
pro.then(
  (data) => {
    console.log("成功", data);
  },
  (reason) => {
    console.log("失败", reason);
  }
);

链式调用

  1. then方法必定会返回一个新的Promise，可以理解为后续处理也是一个任务。
  2. 新任务的状态取决于后续处理。
    • 若没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据。
    • 说有后续处理但还未执行，新任务为挂起状态。
    • 若后续处理执行了，则根据后续处理的情况确定新任务的状态。
      • 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值。
      • 后续处理执行有错，新任务的状态为失败，数据为异常对象。
      • 后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致。

小知识：当.then里面不是一个函数时，可以把它当做.then(null)。

.then(console.log)，会将数据传递给console.log()，也就是打印数据。

常见任务处理代码

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

// 任务成功后，依次执行处理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(任务数组)返回一个任务<br />任务数组全部成功则成功<br />任何一个失败则失败
Promise.any(任务数组)返回一个任务<br />任务数组任一成功则成功<br />任务全部失败则失败
Promise.allSettled(任务数组)返回一个任务<br />任务数组全部已决则成功<br />该任务不会失败
Promise.race(任务数组)返回一个任务<br />任务数组任一已决则已决，状态和其一致

练习：

// 获取某一页的学生数据
function fetchStudents(page) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.1) {
        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() * 3000));
  });
}

// 获取1-10页的学生，最终按照页码的顺序合并成一个数组，如果某些页码的数据获取失败，则提示错误
Promise.all(new Array(10).fill(null).map((it, i) => fetchStudents(i + 1)))
  .then((data) => {
    console.log(data.flat());
  })
  .catch((err) => {
    console.log(err);
  });
// 获取1-10页的学生，最终按照页码的顺序合并成一个数组，如果某些页码的数据获取失败，就不加入该数据即可
Promise.allSettled(
  new Array(10).fill(null).map((it, i) => fetchStudents(i + 1))
).then((data) => {
  data = data.filter((it) => it.status === "fulfilled").map((it) => it.value).flat();
  console.log(data);
});
// 获取1-10页的学生，打印最先获取到的数据，如果全部都获取失败，则打印所有的错误消息
Promise.any(new Array(10).fill(null).map((it, i) => fetchStudents(i + 1)))
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err.errors);
  });
// 获取1-10页的学生，输出最先得到的结果（有结果输出结果，有错误输出错误）
Promise.race(new Array(10).fill(null).map((it, i) => fetchStudents(i + 1)))
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

async & await

消除回调

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

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

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

async

async关键字用于修饰函数，被它修饰的函数，一定返回Promise。

// function m() {
//   return new Promise((resolve) => {
//     resolve(123);
//   });
// }
async function m() {
  return 123;
}
async function n() {
  const data = null;
  data.toString();
}
console.log(m()); // fulfilled 123
console.log(n()); // rejected Error

await

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

function delay(duration) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, duration);
  });
}

// delay(2000).then(() => {
//   console.log("执行");
// });
(async () => {
  await delay(2000);
  console.log("执行");
})();

await 也可以等待其他数据。

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

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

(async () => {
  try {
    await delay(2000);
    console.log("执行");
  } catch (err) {
    console.log("失败", err);
  }
})();

案例：每隔一秒输出一个ok

function delay(duration) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, duration);
  });
}
(async () => {
  for (let i = 0; i < 3; i++) {
    await delay(1000);
    console.log("ok");
  }
})();

总结

以上就是我对 Promise 相关知识的全部总结，欢迎路过的朋友留言讨论。

目录

Promise API
链式调用
Promise的静态方法
async & await
总结
ICP备案号：鲁ICP备2020040322号