怎么使用JavaScript中的Promise处理异步编程？-js教程-PHP中文网

怎么使用JavaScript中的Promise处理异步编程？

紅蓮之龍

发布： 2025-09-19 23:03:01

原创

234人浏览过

Promise通过三种状态（pending、fulfilled、rejected）和.then()、.catch()方法解决异步回调地狱问题，支持链式调用与Promise.all()并行处理，结合async/await更易读，但无法取消且需注意未捕获异常，相比Observable适用于一次性不可取消的操作。

怎么使用javascript中的promise处理异步编程？

Promise 主要用来解决 JavaScript 异步编程中回调地狱的问题，它提供了一种更清晰、更易于管理的方式来处理异步操作。

使用 Promise 的核心在于理解其三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败），以及如何利用

.then()

登录后复制

和

.catch()

登录后复制

方法来处理异步操作的结果。

解决方案

创建 Promise 对象：

立即学习“Java免费学习笔记（深入）”；

首先，你需要创建一个 Promise 对象。Promise 构造函数接受一个函数作为参数，这个函数又接受两个参数：

resolve

登录后复制

和

reject

登录后复制

。

resolve

登录后复制

用于在异步操作成功时将 Promise 状态变为

fulfilled

登录后复制

，

reject

登录后复制

用于在异步操作失败时将 Promise 状态变为

rejected

登录后复制

。

const myPromise = new Promise((resolve, reject) => {
  // 模拟一个异步操作
  setTimeout(() => {
    const success = true; // 假设操作成功
    if (success) {
      resolve("操作成功！"); // 将 Promise 状态变为 fulfilled，并传递结果
    } else {
      reject("操作失败！"); // 将 Promise 状态变为 rejected，并传递错误信息
    }
  }, 1000); // 延迟 1 秒
});

登录后复制

使用
```
.then()
```
登录后复制
处理成功状态：

使用
```
.then()
```
登录后复制
方法来处理 Promise 成功状态（
```
fulfilled
```
登录后复制
）。
```
.then()
```
登录后复制
接受一个回调函数作为参数，该回调函数会在 Promise 状态变为
```
fulfilled
```
登录后复制
时被调用，并接收
```
resolve
```
登录后复制
传递的结果。
```
myPromise.then((result) => {
  console.log(result); // 输出 "操作成功！"
});
```
登录后复制
使用
```
.catch()
```
登录后复制
处理失败状态：

使用
```
.catch()
```
登录后复制
方法来处理 Promise 失败状态（
```
rejected
```
登录后复制
）。
```
.catch()
```
登录后复制
接受一个回调函数作为参数，该回调函数会在 Promise 状态变为
```
rejected
```
登录后复制
时被调用，并接收
```
reject
```
登录后复制
传递的错误信息。
```
myPromise.catch((error) => {
  console.error(error); // 输出 "操作失败！"
});
```
登录后复制

Promise 链式调用：

Promise 的强大之处在于可以进行链式调用。

.then()

登录后复制

方法会返回一个新的 Promise 对象，因此你可以继续使用

.then()

登录后复制

或

.catch()

登录后复制

方法来处理后续的异步操作。

myPromise
  .then((result) => {
    console.log(result); // 输出 "操作成功！"
    return "继续处理..."; // 返回一个新的值，传递给下一个 .then()
  })
  .then((nextResult) => {
    console.log(nextResult); // 输出 "继续处理..."
  })
  .catch((error) => {
    console.error(error); // 输出 "操作失败！"
  });

登录后复制

使用

Promise.all()

登录后复制

并行处理多个 Promise：

如果需要并行执行多个异步操作，可以使用

Promise.all()

登录后复制

方法。

Promise.all()

登录后复制

接受一个 Promise 对象数组作为参数，它会等待所有 Promise 对象都变为

fulfilled

登录后复制

状态，然后返回一个包含所有结果的数组。如果其中任何一个 Promise 对象变为

rejected

登录后复制

状态，

Promise.all()

登录后复制

也会立即变为

rejected

登录后复制

状态。

const promise1 = Promise.resolve(1);
const promise2 = new Promise((resolve) => setTimeout(() => resolve(2), 200));
const promise3 = new Promise((resolve, reject) => setTimeout(() => reject('出错了'), 100));

Promise.all([promise1, promise2])
  .then((values) => {
    console.log(values); // 输出 [1, 2]
  })
  .catch((error) => {
    console.error(error); // 不会被执行，因为 promise3 被注释掉了
  });

// 如果包含 reject 的 promise
Promise.all([promise1, promise2, promise3]).then(values => {
    console.log(values);
}).catch(err => {
    console.error(err); // 输出 出错了
})

登录后复制

Promise 的状态是如何转换的？

Promise 的状态转换只能由 pending 变为 fulfilled 或 rejected，且一旦状态发生改变，就无法再次改变。

resolve

登录后复制

函数会将 pending 状态转换为 fulfilled 状态，

reject

登录后复制

函数会将 pending 状态转换为 rejected 状态。如果在 Promise 构造函数中抛出错误，Promise 对象也会直接变为 rejected 状态。

async/await 如何简化 Promise 的使用？

豆包AI编程

豆包推出的AI编程助手

483

查看详情

async/await

登录后复制

是 JavaScript 中用于处理异步操作的语法糖，它建立在 Promise 之上，可以使异步代码看起来更像同步代码。使用

async

登录后复制

关键字声明的函数会隐式地返回一个 Promise 对象。在

async

登录后复制

函数中，可以使用

await

登录后复制

关键字来等待一个 Promise 对象变为 fulfilled 状态，并将结果返回。

async function myFunction() {
  try {
    const result = await myPromise; // 等待 myPromise 变为 fulfilled 状态
    console.log(result); // 输出 "操作成功！"
    const nextResult = await anotherAsyncFunction(result);
    console.log(nextResult);
  } catch (error) {
    console.error(error); // 输出 "操作失败！"
  }
}

myFunction();

登录后复制

async/await

登录后复制

使得异步代码更加易读和易于维护，减少了回调函数的嵌套，提高了代码的可读性。

Promise 的优势和局限性？

优势：
- 解决了回调地狱问题，提高了代码的可读性和可维护性。
- 提供了统一的异步操作处理方式，简化了异步编程的复杂性。
- 可以使用链式调用，方便地处理多个异步操作。
- 可以通过
```
Promise.all()
```
  登录后复制
  并行处理多个异步操作。
- ```
async/await
```
  登录后复制
  进一步简化了 Promise 的使用。
局限性：
- Promise 无法取消。一旦 Promise 对象创建，就无法停止其执行。
- 如果不设置回调函数，Promise 内部抛出的错误不会反映到外部。
- 当处于 pending 状态时，无法得知目前进展到哪个阶段（虽然可以通过一些库实现）。

如何处理 Promise 中未捕获的异常？

在 Promise 链中，如果某个 Promise 抛出了异常，但没有被

.catch()

登录后复制

方法捕获，那么这个异常可能会被忽略，导致程序出现未知的错误。为了避免这种情况，建议在 Promise 链的末尾添加一个全局的

.catch()

登录后复制

方法，用于捕获所有未处理的异常。

myPromise
  .then((result) => {
    // ...
  })
  .catch((error) => {
    // 处理特定的错误
  })
  .catch((error) => {
    console.error("全局错误处理:", error); // 捕获所有未处理的异常
  });

登录后复制

此外，可以使用

window.addEventListener('unhandledrejection', ...)

登录后复制

来监听未处理的 Promise rejection 事件，进行全局的错误处理。

Promise 与 Observable 的区别？

Promise 和 Observable 都是用于处理异步操作的，但它们之间存在一些重要的区别。

Promise:
- 一次性操作：Promise 只会 resolve 或 reject 一次。
- 不可取消：一旦 Promise 开始执行，就无法取消。
- 适用于处理单个异步操作。
Observable:
- 多次操作：Observable 可以多次发出值（类似于事件流）。
- 可取消：Observable 可以被取消，停止发出值。
- 适用于处理连续的异步操作，例如事件流、数据流。

Observable 提供了更强大的功能，例如可以进行过滤、转换、组合等操作，更适合处理复杂的异步场景。常用的 JavaScript 库 RxJS 实现了 Observable。

Promise 如何与回调函数结合使用？

虽然 Promise 旨在取代回调函数，但在某些情况下，仍然需要将 Promise 与回调函数结合使用。例如，某些旧的 API 仍然只支持回调函数，这时可以使用 Promise 来封装这些 API。

function callbackBasedApi(callback) {
  setTimeout(() => {
    const success = true;
    if (success) {
      callback(null, "操作成功"); // 成功时，第一个参数为 null，第二个参数为结果
    } else {
      callback("操作失败", null); // 失败时，第一个参数为错误信息，第二个参数为 null
    }
  }, 500);
}

function promiseBasedFunction() {
  return new Promise((resolve, reject) => {
    callbackBasedApi((error, result) => {
      if (error) {
        reject(error);
      } else {
        resolve(result);
      }
    });
  });
}

promiseBasedFunction()
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

登录后复制

通过将基于回调的 API 封装成 Promise，可以更方便地使用 Promise 的链式调用和错误处理机制。

以上就是怎么使用JavaScript中的Promise处理异步编程？的详细内容，更多请关注php中文网其它相关文章！