当前位置：首页 > article >正文

说说es6 promise async await 以及 promise A+规范的了解

article 2025/1/11 22:57:54

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

1. Promise

简介

Promise 是 JavaScript 中用于处理异步操作的一种方式，它表示一个异步操作的最终完成（或失败）及其结果值的表示。Promise 是 ES6 引入的，它通过链式调用来处理回调函数，避免了“回调地狱”的问题。

基本语法

let promise = new Promise((resolve, reject) => {
  // 异步操作
  let success = true;
  if (success) {
    resolve("成功");
  } else {
    reject("失败");
  }
});

promise.then((result) => {
  console.log(result);  // 成功
}).catch((error) => {
  console.log(error);   // 失败
});

resolve(value)：表示操作成功，并传递结果值。
reject(reason)：表示操作失败，并传递错误原因。
then(onFulfilled, onRejected)：then 方法用于指定在 Promise 状态变为 fulfilled 或 rejected 时的回调函数。onFulfilled 在成功时执行，onRejected 在失败时执行。
catch(onRejected)：catch 用于处理 Promise 被拒绝时的情况，等价于 then(null, onRejected)。

链式调用

Promise 支持链式调用，也就是在 then() 之后可以继续返回新的 Promise，从而继续处理异步操作，避免嵌套回调。

new Promise((resolve) => resolve(1))
  .then((result) => {
    console.log(result); // 1
    return result + 1;
  })
  .then((result) => {
    console.log(result); // 2
    return result + 1;
  })
  .then((result) => {
    console.log(result); // 3
  });

组合多个 Promise

Promise 也提供了 Promise.all() 和 Promise.race() 来处理多个异步操作。

Promise.all()：当所有的 Promise 都成功时，返回一个包含每个 Promise 结果的数组；如果有一个 Promise 失败，Promise.all() 会立即失败。

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results);
  })
  .catch((error) => {
    console.log(error);
  });

Promise.race()：返回第一个完成的 Promise（无论是成功还是失败）。

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

2. async/await

简介

async 和 await 是 ES2017（ES8）引入的用于简化处理异步操作的语法糖。它们是基于 Promise 的，但使用起来更加简洁和直观。

async：标记一个函数为异步函数，返回一个 Promise 对象。
await：用于等待一个 Promise 对象的完成，await 后面必须跟一个 Promise 对象。

基本用法

async function fetchData() {
  try {
    let result = await new Promise((resolve) => resolve("数据加载成功"));
    console.log(result); // 数据加载成功
  } catch (error) {
    console.error(error);
  }
}

fetchData();

异常处理

async/await 使用 try/catch 来捕获错误，这使得异步代码的异常处理变得更加简洁。

async function fetchData() {
  try {
    let result = await Promise.reject("加载失败");
    console.log(result);
  } catch (error) {
    console.log(error); // 加载失败
  }
}

fetchData();

顺序执行多个异步任务

当多个异步操作需要顺序执行时，async/await 让代码更加易读：

async function processTasks() {
  let task1 = await fetchData1();
  let task2 = await fetchData2();
  console.log(task1, task2);
}

processTasks();

并行执行多个异步任务

如果多个异步任务没有依赖关系，可以使用 Promise.all 来并行执行它们：

async function processTasks() {
  let [task1, task2] = await Promise.all([fetchData1(), fetchData2()]);
  console.log(task1, task2);
}

processTasks();

3. Promise A+ 规范

简介

Promise A+ 是对 Promise 规范的详细描述，它定义了 Promise 应该遵循的行为，确保不同的 JavaScript 环境中的 Promise 实现是一致的。这个规范最早由社区提出并被广泛接受，成为了 ECMAScript 规范的一部分。

核心内容

Promise A+ 规范定义了 Promise 必须具有以下特性：

状态：Promise 对象只有三种状态：
- pending（待定）：初始状态，表示操作未完成。
- fulfilled（已完成）：表示操作成功，并有返回值。
- rejected（已拒绝）：表示操作失败，并有失败原因。
状态不可变：一旦 Promise 进入 fulfilled 或 rejected 状态，状态不可再变。
链式调用：then 返回的必须是一个新的 Promise 对象，无论回调函数返回的是值还是另一个 Promise，都必须满足以下规则：
- 如果回调函数返回一个普通值，则 then 返回的 Promise 应立即解决该值。
- 如果回调函数返回的是另一个 Promise，则 then 返回的 Promise 应等待这个 Promise 完成。
异步执行：then 中的回调函数应该在当前执行栈清空之后执行，而不是立即执行。这保证了 Promise 的异步特性。
错误传播：如果 then 中的回调抛出异常或返回一个失败的 Promise，则后续的 catch 会处理这些错误。

示例

let p = new Promise((resolve, reject) => {
  resolve("成功");
});

p.then(
  (value) => {
    console.log(value);  // "成功"
    return "继续处理";
  },
  (error) => {
    console.log(error); 
  }
).then(
  (value) => {
    console.log(value);  // "继续处理"
  }
);