ES6-Promise用法

关于 Promise,这通常指编程领域(尤其是 JavaScript)中用于处理异步操作的机制。以下是详细解析:


一、Promise 核心概念

Promise 是 ES6 引入的对象,用于表示异步操作的最终完成(或失败)及其结果值。它解决了传统回调函数导致的「回调地狱」问题。

1. 状态机

Promise 有三种状态:

  • Pending(待定):初始状态,未完成或拒绝。
  • Fulfilled(已实现):操作成功完成。
  • Rejected(已拒绝):操作失败。

状态转换:
Pending → Fulfilled(触发 resolve)

或 Pending → Rejected(触发 reject)。


二、基础语法与示例

1. 创建 Promise
javascript 复制代码
const myPromise = new Promise((resolve, reject) => {
  // 异步操作逻辑
  const success = true; // 模拟结果
  if (success) {
    resolve("操作成功!"); // 触发 Fulfilled 状态
  } else {
    reject("操作失败!"); // 触发 Rejected 状态
  }
});
2. 链式调用 .then()、.catch()、.finally()
javascript 复制代码
myPromise
  .then((result) => {
    console.log("成功:", result); // 输出: "操作成功!"
  })
  .catch((error) => {
    console.error("失败:", error);
  })
  .finally(() => {
    console.log("无论成功/失败都会执行");
  });

三、Promise 常用方法

1. Promise.all([promise1, promise2, ...])
  • 作用:等待所有 Promise 完成。
  • 返回:一个新的 Promise,全部成功则返回结果数组;任一失败则返回第一个失败原因。
javascript 复制代码
const p1 = Promise.resolve("数据A");
const p2 = new Promise((resolve) => setTimeout(() => resolve("数据B"), 100));
Promise.all([p1, p2])
  .then((results) => console.log(results)) // 输出: ["数据A", "数据B"]
  .catch((err) => console.error(err));
2. Promise.race([promise1, promise2, ...])
  • 作用:哪个 Promise 先完成(成功/失败),就采用它的结果。
javascript 复制代码
const fastPromise = new Promise((resolve) => setTimeout(() => resolve("快"), 100));
const slowPromise = new Promise((resolve) => setTimeout(() => resolve("慢"), 500));
Promise.race([fastPromise, slowPromise])
  .then((result) => console.log(result)); // 输出: "快"

四、实际应用场景

1. 异步数据请求
javascript 复制代码
function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => resolve(data))
      .catch((error) => reject(error));
  });
}

// 使用示例
fetchData("https://api.example.com/data")
  .then((data) => console.log(data))
  .catch((err) => console.error("请求失败:", err));
2. 串联异步操作
javascript 复制代码
step1()
  .then((result1) => step2(result1))
  .then((result2) => step3(result2))
  .catch((error) => console.error("步骤失败:", error));

五、常见问题

1. 如何将 Callback 转为 Promise?
javascript 复制代码
function callbackStyleFunction(param, callback) {
  // 假设这是第三方库的回调函数
  callback(null, "数据");
}

// 封装为 Promise
const promisified = (param) => 
  new Promise((resolve, reject) => 
    callbackStyleFunction(param, (err, data) => {
      if (err) reject(err);
      else resolve(data);
    })
  );
2. 如何处理多个 Promise 竞争?
javascript 复制代码
// 使用 Promise.race 实现超时控制
function withTimeout(promise, ms) {
  return Promise.race([
    promise,
    new Promise((_, reject) => 
      setTimeout(() => reject("超时"), ms)
    )
  ]);
}

如果需要更具体的场景示例(如 async/await 语法、复杂链式调用),可进一步说明需求!

相关推荐
IT_Octopus8 小时前
【零基础入门 LLM 开发 · Day 11】:ChatOpenAI vs init_chat_model——一行换供应商
java·前端·javascript
deli0078 小时前
撒下 200 个种子点,平面为什么自己长成蜂窝?Voronoi 图实验室
前端
King禅8 小时前
JavaScript 调试实战指南:从 console.log 到 DevTools 深度运用
javascript
大文说跨境8 小时前
多账号环境隔离方案技术选型:指纹浏览器、VPS 与云手机的三种架构对比
java·开发语言·前端
咕白m6258 小时前
使用 C# 将 TIFF 转换为 PDF
前端·c#
全栈项目管理程序猿8 小时前
ArcGIS JS 基础教程(28):图层渲染顺序管理
前端·javascript
huakoh8 小时前
MCP 工具报错走哪条通道:三条探针的最小复现检查
前端
用户033307413958 小时前
ParadeDB 的 pg_search 0.26 把十词 BM25 搜索从 129ms 降到 29ms
前端
不爱说话郭德纲9 小时前
从“点点点”到一键出包:我把 uni-app x Android 离线打包做成了脚本
android·前端·uni-app
扶风ff9 小时前
练题簿在线免费刷题:创建个人任务,把刷题、听题和模考目标放到每天的学习中
开发语言·javascript·学习·小程序