JavaScript中Promise分别有哪些函数?

在 JavaScript 中,Promise 是一种用于处理异步操作的对象。它代表一个尚未完成的操作,并最终会返回一个值或者抛出错误。Promise 可以处于以下三种状态之一:

  • Pending(等待中) :初始状态,表示操作尚未完成。
  • Fulfilled(已完成) :表示操作成功完成,并且有返回结果。
  • Rejected(已拒绝) :表示操作失败,并且有错误信息。

1. 创建一个 Promise

你可以使用 new Promise() 来创建一个新的 Promise 对象。构造函数接受一个函数作为参数,这个函数又接受两个参数:resolvereject。这两个参数是函数,用于标记操作的成功或失败。

javascript 复制代码
javascript
复制代码
const promise = new Promise((resolve, reject) => {
  // 异步操作
  let success = true;

  if (success) {
    resolve("成功!"); // 操作成功
  } else {
    reject("失败!"); // 操作失败
  }
});

2. Promise 的方法

Promise 提供了以下几种常用的方法来处理结果:

then()

then() 方法接受两个回调函数,第一个回调函数用于处理成功的结果,第二个回调函数用于处理失败的情况。

javascript 复制代码
javascript
复制代码
promise.then(
  result => console.log(result), // 处理成功
  error => console.log(error)    // 处理失败
);

catch()

catch() 方法是 then() 的快捷方式,用来处理 Promise 被拒绝(rejected)时的情况。它只接收一个参数,即错误处理函数。

javascript 复制代码
javascript
复制代码
promise
  .then(result => console.log(result))
  .catch(error => console.log(error)); // 处理错误

finally()

finally() 方法无论 Promise 的最终状态如何都会执行,用于进行清理操作,如关闭文件或清理资源。

javascript 复制代码
javascript
复制代码
promise
  .then(result => console.log(result))
  .catch(error => console.log(error))
  .finally(() => console.log("操作结束"));

3. 示例:异步操作

javascript 复制代码
javascript
复制代码
// 模拟一个异步操作,例如请求数据
const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = { message: "数据请求成功" };
    resolve(data); // 模拟操作成功
  }, 2000);
});

fetchData
  .then(data => {
    console.log(data.message); // 数据请求成功
  })
  .catch(error => {
    console.error("发生错误:", error);
  })
  .finally(() => {
    console.log("操作结束");
  });

4. Promise.all()

Promise.all() 用于并行执行多个 Promise,并且返回一个新的 Promise,当所有 Promise 都完成时(无论成功还是失败),Promise.all() 才会触发。

javascript 复制代码
javascript
复制代码
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, "第一个 Promise"));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 2000, "第二个 Promise"));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 3000, "第三个 Promise"));

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results); // ["第一个 Promise", "第二个 Promise", "第三个 Promise"]
  })
  .catch(error => {
    console.error("错误:", error);
  });

5. Promise.race()

Promise.race() 会返回第一个完成的 Promise(无论是成功还是失败)。如果有一个 Promise 被拒绝,它就会立即返回。

javascript 复制代码
javascript
复制代码
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, "第一个 Promise"));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 500, "第二个 Promise"));

Promise.race([promise1, promise2])
  .then(result => console.log(result)) // "第二个 Promise"
  .catch(error => console.error("错误:", error));

总结

Promise 是现代 JavaScript 处理中处理异步操作的标准方式,比传统的回调函数(callback)更容易理解和维护,尤其在涉及多个异步操作时。

相关推荐
无奈何杨3 分钟前
风控系统事件分析中心,关联关系、排行、时间分布
前端·后端
Moment9 分钟前
nginx 如何配置防止慢速攻击 🤔🤔🤔
前端·后端·nginx
晓得迷路了14 分钟前
栗子前端技术周刊第 94 期 - React Native 0.81、jQuery 4.0.0 RC1、Bun v1.2.20...
前端·javascript·react.js
江城开朗的豌豆14 分钟前
React Native 实战心得
javascript
前端小巷子16 分钟前
Vue 自定义指令
前端·vue.js·面试
玲小珑21 分钟前
Next.js 教程系列(二十七)React Server Components (RSC) 与未来趋势
前端·next.js
Mike_jia22 分钟前
UptimeRobot API状态监控:零成本打造企业级业务健康看板
前端
江城开朗的豌豆23 分钟前
React状态更新踩坑记:我是这样优雅修改参数的
前端·javascript·react.js
CodeSheep41 分钟前
Stack Overflow,轰然倒下了!
前端·后端·程序员
i紸定i41 分钟前
解决html-to-image在 ios 上dom里面的图片不显示出来
前端·ios·vue·html·html-to-image