ES6：promise基本使用讲解

2024-04-17 15:19:52

一、Promis简介

1.是什么

Promise 是异步编程的一种解决方案。在ES6中，promise对象是一个构造函数，用来生成promise实例。

2.为什么需要promise

在出现promise之前，JS没有一个统一的、标准的异步编程模式，各种库和框架各自采用不同的模式进行异步操作，十分混乱。

常见的异步操作方式例如回调函数，会随着异步操作的复杂度变高而出现“回调地狱”，指的是过度使用嵌套回调函数来处理异步操作导致代码的可读性、维护性差。例如

asyncFunction1(function(result1) {
    asyncFunction2(result1, function(result2) {
        asyncFunction3(result2, function(result3) {
            // 更多嵌套的回调函数...
        });
    });
});

3.promise的三种状态

pending（理解成准备中/进行中/未完成都行）、fulfilled（已成功）和rejected（已失败）

promise只能从pending=>fulfilled或者是pending=>rejected，状态一但改变就不可逆转。

4.基本使用

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。下面是一个基于promise的请求：

    <script>
      // 创建一个基于Promise的异步请求函数
      function makeAsyncRequest(url) {
        // 返回一个Promise对象
        return new Promise((resolve, reject) => {
          // 使用fetch发送请求
          fetch(url)
            .then((response) => {
              // 检查响应状态码
              if (!response.ok) {
                // 如果状态码不是200-299之间，则抛出错误
                throw new Error("错误");
              }
              // 否则解析响应体
              return response.json();
            })
            .then((data) => {
              // 请求成功，解析出数据后，通过resolve返回数据
              resolve(data);
            })
            .catch((error) => {
              // 请求失败或处理响应出错时，通过reject返回错误
              reject(error);
            });
        });
      }

      // 使用异步请求函数
      makeAsyncRequest("https://demo.com/data")
        .then((data) => {
          // 请求成功，处理返回的数据
          console.log("成功:", data);
        })
        .catch((error) => {
          // 请求失败，处理错误
          console.error("失败:", error);
        });
    </script>

resolve函数：将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去

reject函数：将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

then方法：可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。

二、promise的方法

1.promise.then()

.then()方法用于指定Promise在fulfilled（已成功）状态下的回调函数，它可以链接多个.then()来形成执行链。如果Promise被reject，后续的.catch()或者.then()中的错误处理函数会被调用。

<script>
promise.then((result) => {
  // 当前Promise成功后的处理逻辑
}, (error) => {
  // 或者直接链式写法处理错误情况（现在推荐分开使用catch处理错误）
});

// ES6建议的写法，将成功的处理和错误的处理分离
promise.then((result) => {
  // 成功处理
}).catch((error) => {
  // 失败处理
});
</script>

2.promise.catch()

.catch()方法用来处理Promise在rejected状态时的回调函数，它是.then(null, rejectionHandler)的简写形式，专门用于捕获前面链中任何.then()的错误。

promise.catch((error) => {
  // 处理Promise的rejected状态，即异常或错误情况
});

3.promise.finally()

promise.finally()方法无论Promise最后的状态如何，都会执行提供的回调函数，常用于资源清理或UI恢复等场景。

promise.finally(() => {
  // 不管Promise最终是fulfilled还是rejected都会执行的代码
});

4.promise.resolve() 和 promise.reject()

这两个方法实际上是全局静态方法，而非实例方法：

创建并返回一个已经resolved的Promise，通常用于将非Promise值转换为Promise，或者快速返回一个成功的Promise。

Promise.resolve(reason);

创建并返回一个已经被rejected的Promise，用于快速抛出错误。

Promise.reject(reason);

5.promise.all()

.all()方法接收一个Promise数组作为参数，当所有Promise都fulfilled时，返回的新的Promise才会fulfilled，并带有所有Promise的结果组成的数组。只要其中一个Promise rejected，则返回的Promise立即rejected。

Promise.all(promisesArray).then(values => {
  // 所有Promise都fulfilled时执行
}).catch(error => {
  // 只要有一个Promise rejected就执行
});

6.promise.race()

.race()方法同样接收Promise数组，当其中任意一个Promise fulfilled或rejected时，返回的新Promise就会采用相同的状态，并返回那个率先改变状态的Promise的结果或错误原因。

Promise.race(promisesArray).then(value => {
  // 只要有一个Promise fulfilled就执行
}).catch(error => {
  // 第一个rejected的Promise的错误原因
});

7.promise.allSettled()

.allSettled()方法接收一个Promise数组，当所有Promise都settled（即完成，无论是fulfilled还是rejected）时，返回的新的Promise会fulfilled，并带有所有Promise的结果对象组成的数组，每个结果对象包含status（"fulfilled"或"rejected"）和value（如果是fulfilled时的结果值）或reason（如果是rejected时的错误原因）属性。

Promise.allSettled(promisesArray).then(results => {
  // 所有Promise都settled（无论是fulfilled还是rejected）时执行
});

8.promise.any()（ES2021引入）

.any()方法也是接收一个Promise数组，只要其中任何一个Promise fulfilled，返回的Promise就会以该Promise的结果fulfilled；但如果所有Promise都rejected，则返回的Promise将以AggregateError rejected（AggregateError是一种内置错误类型，它表示一组错误的集合，通常用于一次性报告多个错误的情况）。

Promise.any(promisesArray).then(value => {
  // 只要有一个Promise fulfilled就执行
}).catch(error => {
  // 如果所有Promise都rejected，则返回AggregateError
});

码农公寓