ES6-Promise用法

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


一、Promise 核心概念

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

1. 状态机

Promise 有三种状态:

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

状态转换:
PendingFulfilled(触发 resolve

PendingRejected(触发 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 语法、复杂链式调用),可进一步说明需求!

相关推荐
掘了1 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅1 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅1 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅2 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment2 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅2 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊2 小时前
jwt介绍
前端
爱敲代码的小鱼2 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax
Cobyte3 小时前
AI全栈实战:使用 Python+LangChain+Vue3 构建一个 LLM 聊天应用
前端·后端·aigc
NEXT063 小时前
前端算法:从 O(n²) 到 O(n),列表转树的极致优化
前端·数据结构·算法