异步编程_JS Promise实战指南-js教程-PHP中文网

异步编程_JS Promise实战指南

幻影之瞳

发布： 2025-11-17 20:18:09

原创

414人浏览过

Promise是JavaScript中处理异步操作的核心对象，用于解决回调地狱问题。它有pending、fulfilled和rejected三种状态，一旦改变不可逆。通过new Promise创建，使用then、catch、finally链式调用处理结果。Promise.all等待所有任务完成，Promise.race返回首个完成的任务，Promise.allSettled确保所有任务结束并返回各自状态，适合批量处理。实际开发中应封装异步函数、避免错误泄漏、合理链式传递数据，为使用async/await打下基础。

异步编程_js promise实战指南

JavaScript中的异步编程是现代Web开发的核心技能之一。随着单页应用和复杂交互的普及，处理异步操作变得无处不在——比如网络请求、定时任务、文件读写等。而Promise正是解决回调地狱（callback hell）的关键工具。它让异步代码更清晰、可读、易维护。

什么是Promise？

Promise是一个表示异步操作最终完成或失败的对象。它有三种状态：

pending（等待中）：初始状态，既没有完成也没有拒绝
fulfilled（已成功）：操作成功完成
rejected（已失败）：操作失败

一旦状态从pending变为fulfilled或rejected，就不会再改变。这是Promise的核心特性之一。

创建一个Promise非常简单：

如何使用Promise：then、catch、finally

Promise通过链式调用处理结果。常用方法包括then、catch和finally。

then() 接收两个参数：成功回调和失败回调（可选）。

myPromise.then(
(value) => console.log(value), // 成功时执行
(error) => console.error(error) // 失败时执行
);

catch() 专门捕获错误，推荐使用它来处理异常。

myPromise
.then((res) => console.log(res))
.catch((err) => console.error("出错了：", err));

finally() 无论成功或失败都会执行，适合清理资源、关闭加载动画等。

myPromise
  .then((res) => console.log(res))
  .catch((err) => console.error(err))
  .finally(() => console.log("请求结束"));

Promise常见实用方法

除了实例方法，Promise还提供了一些静态方法，极大提升了异步控制能力。

Promise.all(iterable)：等待所有Promise完成。只要有一个失败，整体就失败。

const p1 = Promise.resolve(1);
const p2 = fetch('/api/user').then(res => res.json());
const p3 = new Promise(r => setTimeout(() => r('延迟完成'), 500));

Promise.all([p1, p2, p3])
.then(results => console.log(results)) // [1, {...}, '延迟完成']
.catch(err => console.error("任一失败：", err));

适用于需要多个数据源同时加载的场景，如首页聚合接口。

豆包AI编程

豆包推出的AI编程助手

483

查看详情

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

Promise.race([
fetch('/api/data'),
new Promise((_, reject) => setTimeout(() => reject("超时"), 3000))
]) .then(data => console.log("获取到数据")) .catch(err => console.error(err)); // 可能输出“超时”

可用于设置请求超时机制。

Promise.allSettled(iterable)：等待所有Promise结束（无论成功或失败），返回每个结果的状态。

Promise.allSettled([Promise.resolve(1), Promise.reject("失败")])
  .then(results => {
    results.forEach((result, index) => {
      console.log(`任务${index}：`, result.status);
      if (result.status === "fulfilled") {
        console.log("值：", result.value);
      } else {
        console.log("原因：", result.reason);
      }
    });
  });

适合批量处理独立任务，不希望一个失败影响整体流程。

Promise.resolve() / Promise.reject()：快速创建已解决或已拒绝的Promise，常用于兼容或测试。

实际项目中的最佳实践

在真实开发中，合理使用Promise能让代码更健壮。

封装异步操作为函数：把网络请求、定时器等包装成返回Promise的函数。

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

function apiGet(url) {
  return fetch(url).then(res => {
    if (!res.ok) throw new Error(res.statusText);
    return res.json();
  });
}

避免Promise泄漏：始终处理错误，不要忘记catch。

合理使用链式调用：then可以传递值给下一个then，实现数据流控制。

apiGet('/user/1')
  .then(user => user.id)
  .then(id => apiGet(`/posts?userId=${id}`))
  .then(posts => console.log(posts))
  .catch(err => console.error("流程中断：", err));

基本上就这些。掌握Promise是迈向async/await的基础，也是写出高质量JS代码的第一步。

以上就是异步编程_JS Promise实战指南的详细内容，更多请关注php中文网其它相关文章！