如何使用 `Promise` 进行异步编程？

原创于 2024-12-07 08:18:27 发布 · 757 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #javascript #vue.js

JavaScript 问题专栏专栏收录该内容

66 篇文章

订阅专栏

使用 Promise 进行异步编程是 JavaScript 中处理异步操作的常见方式。Promise 允许我们以更加清晰和可维护的方式处理如网络请求、定时器等异步任务。下面我将详细讲解如何使用 Promise 进行异步编程，并通过实际项目示例帮助你更好地理解其用法。

1. `Promise` 基础知识

1.1 什么是 `Promise`？

Promise 是 JavaScript 中用来表示异步操作的最终完成（或失败）及其结果值的一种机制。它使得异步代码更加简洁，避免了传统回调函数中常见的“回调地狱”。

Promise 的生命周期有三个状态：

Pending（待定）：初始状态，表示异步操作尚未完成。
Fulfilled（已完成）：表示异步操作成功完成，并返回一个结果。
Rejected（已拒绝）：表示异步操作失败，并返回一个错误。

1.2 `Promise` 的三种状态

Pending：代表异步操作还在进行中。
Fulfilled：异步操作成功，返回结果。
Rejected：异步操作失败，返回错误原因。

1.3 `Promise` 常用方法

then(onFulfilled, onRejected)：处理 Promise 成功与失败的回调。
catch(onRejected)：处理 Promise 失败的回调。
finally(onFinally)：不论 Promise 成功或失败都会执行的回调。

2. 如何创建和使用 `Promise`

2.1 创建 `Promise` 实例

你可以通过 new Promise() 创建一个新的 Promise 实例，并传入一个执行器函数。执行器函数接收两个参数：resolve 和 reject。这两个参数分别用于处理异步操作成功或失败的情况。

示例：创建一个模拟的异步操作

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let success = true; // 假设这个值从网络请求等获取
      if (success) {
        resolve("数据获取成功"); // 异步操作成功
      } else {
        reject("数据获取失败"); // 异步操作失败
      }
    }, 2000); // 模拟延迟 2 秒
  });
}

fetchData()
  .then(result => {
    console.log(result); // 输出成功的结果
  })
  .catch(error => {
    console.log(error); // 捕获并输出错误
  });

2.2 链式调用与 `then` 方法

Promise 可以通过 then 方法进行链式调用。每一个 then 方法都会返回一个新的 Promise，因此可以将多个异步操作串联起来。

示例：链式调用多个异步操作

function fetchUser() {
  return new Promise(resolve => setTimeout(() => resolve("用户数据"), 1000));
}

function fetchPosts() {
  return new Promise(resolve => setTimeout(() => resolve("帖子数据"), 1500));
}

fetchUser()
  .then(userData => {
    console.log("获取到的用户数据:", userData);
    return fetchPosts(); // 返回一个新的 Promise
  })
  .then(postData => {
    console.log("获取到的帖子数据:", postData);
  })
  .catch(error => {
    console.log("发生错误:", error); // 处理异常
  });

3. 并行和串行异步操作

3.1 `Promise.all` 与并行操作

当你需要同时处理多个异步任务时，可以使用 Promise.all() 来并行执行它们。Promise.all() 会等待所有的 Promise 都完成，然后返回一个新的 Promise，其结果是一个包含所有异步任务结果的数组。

示例：并行请求多个 API

function fetchData1() {
  return new Promise(resolve => setTimeout(() => resolve("数据 1"), 1000));
}

function fetchData2() {
  return new Promise(resolve => setTimeout(() => resolve("数据 2"), 1500));
}

Promise.all([fetchData1(), fetchData2()])
  .then(results => {
    console.log("所有数据:", results); // 输出 ["数据 1", "数据 2"]
  })
  .catch(error => {
    console.log("发生错误:", error);
  });

3.2 `Promise.race` 与竞争操作

Promise.race() 会返回第一个完成的 Promise，不管它是成功还是失败。这适用于你只关心哪个操作最快完成的情况。

示例：第一个完成的请求

let p1 = new Promise(resolve => setTimeout(() => resolve("请求 1 完成"), 2000));
let p2 = new Promise(resolve => setTimeout(() => resolve("请求 2 完成"), 1000));

Promise.race([p1, p2])
  .then(result => {
    console.log("最快完成的请求:", result); // 输出 "请求 2 完成"
  })
  .catch(error => {
    console.log("发生错误:", error);
  });

3.3 串行操作

有时你需要按顺序依次执行多个异步操作，这时可以将多个 Promise 通过链式调用连接起来，或使用 async/await 语法。

示例：串行异步操作

function fetchStep1() {
  return new Promise(resolve => setTimeout(() => resolve("步骤 1 完成"), 1000));
}

function fetchStep2() {
  return new Promise(resolve => setTimeout(() => resolve("步骤 2 完成"), 1000));
}

fetchStep1()
  .then(result => {
    console.log(result);  // 输出 "步骤 1 完成"
    return fetchStep2(); // 执行第二个异步操作
  })
  .then(result => {
    console.log(result);  // 输出 "步骤 2 完成"
  })
  .catch(error => {
    console.log("发生错误:", error);
  });

4. 使用 `async/await` 优化异步代码

4.1 `async/await` 简介

async/await 是 JavaScript 中用于处理异步操作的语法糖，它基于 Promise，并使得异步代码看起来像同步代码一样。async 关键字用于声明一个异步函数，await 关键字用于等待一个 Promise 完成并返回结果。

示例：使用 `async/await`

async function fetchDataAsync() {
  let data = await fetchData();  // 等待 fetchData() 执行完成
  console.log(data);  // 输出数据
}

fetchDataAsync();

4.2 错误处理

async/await 提供了更加清晰的错误处理机制，可以使用 try/catch 块来捕获异步操作中的错误。

示例：使用 `try/catch` 处理错误

async function fetchDataAsync() {
  try {
    let data = await fetchData(); // 等待异步操作
    console.log(data);  // 成功输出数据
  } catch (error) {
    console.log("发生错误:", error);  // 捕获并输出错误
  }
}

fetchDataAsync();

5. 实际项目示例：获取用户和帖子数据

假设你需要在前端获取用户信息和帖子数据，并根据获取的用户数据进一步加载他们的帖子。以下是如何通过 Promise 和 async/await 来实现这一功能。

5.1 示例：使用 `Promise.all` 获取用户和帖子数据

function fetchUserData() {
  return new Promise(resolve => setTimeout(() => resolve("用户数据"), 1000));
}

function fetchPostData() {
  return new Promise(resolve => setTimeout(() => resolve("帖子数据"), 1500));
}

Promise.all([fetchUserData(), fetchPostData()])
  .then(([userData, postData]) => {
    console.log("用户信息:", userData);
    console.log("帖子信息:", postData);
  })
  .catch(error => {
    console.log("发生错误:", error);
  });

5.2 使用 `async/await` 获取数据

async function getUserAndPosts() {
  try {
    let userData = await fetchUserData();
    let postData = await fetchPostData();
    console.log("用户信息:", userData);
    console.log("帖子信息:", postData);
  } catch (error) {
    console.log("发生错误:", error);
  }
}

getUserAndPosts();