JavaScript--Promise类

Onlooker﹒

已于 2023-07-30 17:34:40 修改

阅读量172

点赞数 2

分类专栏： JavaScript 文章标签： javascript

于 2023-07-30 10:06:38 首次发布

本文链接：https://blog.csdn.net/m0_74293254/article/details/132004036

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

在学习Promise类内容前，你需要先了解什么是异步编程，可以参考JavaScript--异步编程,JavaScript--定时事件

Promise介绍：

Promise是JavaScript中用于处理异步操作的对象。它代表着一个异步操作的最终完成（或失败）以及其结果值。Promise通常用于处理从服务器获取数据、读取文件或进行API调用等异步操作。
使用Promise能够以更加结构化和可读的方式编写异步代码。

Promise语法结构：

new Promise(function(resolve, reject) {
  // 异步操作的代码
});

下面是一个示例，演示了如何使用Promise对象的基本语法结构：

const promise = new Promise(function(resolve, reject) {
  // 执行异步操作的代码

  if (操作成功) {
    resolve(操作结果);
  } else {
    reject(错误原因);
  }
});

Promise 构造函数是 JavaScript 中用于创建 Promise 对象的内置构造函数。Promise 构造函数接受一个函数作为参数，该函数是同步的并且会被立即执行，所以我们称之为起始函数。

起始函数包含两个参数 resolve 和 reject，分别表示 Promise 成功和失败的状态。起始函数执行成功时，它应该调用 resolve 函数并传递成功的结果。当起始函数执行失败时，它应该调用 reject 函数并传递失败的原因。

Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：

then：用于处理 Promise 成功状态的回调函数。
catch：用于处理 Promise 失败状态的回调函数。
finally：无论 Promise 是成功还是失败，都会执行的回调函数。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
function getUserInfo() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作，例如发送请求到服务器获取用户信息
    setTimeout(() => {
      const userInfo = [
        { id: 1, name: '张三', email: '123456789@qq.com' },
        { id: 2, name: '李四', email: '12345678910@qq.com' }
      ];

      // 模拟成功的情况
      // 将用户信息传递给resolve函数
      resolve(userInfo);

      // 模拟失败的情况
      // 如果出现错误，调用reject函数并传递错误信息
      // reject('获取用户信息失败');
    }, 2000);
  });
}

// 调用异步操作并处理结果
getUserInfo()
  .then((userInfo) => {
    console.log('用户信息:', userInfo);
  })
  .catch((error) => {
    console.error('错误信息:', error);
  })
  .finally(() => {
    console.log('异步操作已完成。');
  });

</script>
</body>
</html>

在上面的例子中，getUserInfo函数返回二个Promise对象。在Promise的构造函数中，我们执行异步操作，并在操作完成时调用resolve函数传递用户信息，或者在出错时调用reject函数传递错误信息。

通过使用.then方法，我们可以指定成功状态的回调函数，即在异步操作成功时执行的代码。.catch方法用于处理失败状态的回调函数，即在异步操作失败时执行的代码。.finally方法是可选的，它会在无论Promise是成功还是失败时都执行，用于执行一些清理操作或最终的任务。

在这个例子中，我们模拟了一个2秒钟后获得用户信息的异步操作。如果操作成功，我们打印用户信息；如果操作失败，我们打印错误信息。无论成功与否，最终都会打印出"异步操作已完成。"。