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)更容易理解和维护,尤其在涉及多个异步操作时。

相关推荐
蓝天白云下遛狗17 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come1123440 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志1 小时前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景3 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui