Promise 的 API 理解与使用

桃扇骨 2022-09-03 14:28 214阅读 0赞

#### 一、promise 的 API 说明 ####

1.  `Promise` 构造函数: `Promise (excutor) {}`，如下所示：

*  `executor` 函数: 执行器 `(resolve, reject) => {}`
 *  `resolve` 函数: 内部定义成功时我们调用的函数 `value => {}`
 *  `reject` 函数: 内部定义失败时我们调用的函数 `reason => {}`
 *  说明: `executor`会在 `Promise` 内部立即同步调用,异步操作在执行器中执行

1.  `Promise.prototype.then` 方法: `(onResolved, onRejected) => {}`，如下所示：

*  `onResolved` 函数: 成功的回调函数 `(value) => {}`
 *  `onRejected` 函数: 失败的回调函数 `(reason) => {}`
 *  说明: 指定用于得到成功 `value` 的成功回调和用于得到失败 `reason` 的失败回调  
    返回一个新的 `promise` 对象

1.  `Promise.prototype.catch` 方法: `(onRejected) => {}`，如下所示：

*  `onRejected` 函数: 失败的回调函数 `(reason) => {}`
 *  说明: `then()` 的语法糖, 相当于: `then(undefined, onRejected)`

1.  `Promise.resolve` 方法: `(value) => {}`，如下所示：

*  `value`: 成功的数据或 `promise` 对象
 *  说明: 返回一个成功/失败的 `promise` 对象

1.  `Promise.reject` 方法: `(reason) => {}`，如下所示：

*  `reason`: 失败的原因
 *  说明: 返回一个失败的 `promise` 对象

1.  `Promise.all` 方法: `(promises) => {}`，如下所示：

*  `promises`: 包含 `n` 个 `promise` 的数组
 *  说明: 返回一个新的 `promise`, 只有所有的 `promise` 都成功才成功, 只要有一个失败了就  
    直接失败

1.  `Promise.race` 方法: `(promises) => {}`，如下所示：

*  `promises`: 包含 `n` 个 `promise` 的数组
 *  说明: 返回一个新的 `promise`, 第一个完成的 `promise` 的结果状态就是最终的结果状态

#### 二、promise API 的使用 ####

1.  `promise`的 `API` 之 `then` 和 `catch`，代码如下所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>promise的API之then和catch</title>
    </head>
    <body>
      <script> let p = new Promise((resolve, reject) => { // 同步调用 // 修改 promise 对象的状态 reject('error'); }); // 执行 catch 方法 p.catch(reason => { console.log(reason); }); </script>
    </body>
    </html>

1.  `promise` 的 `API` 之 `resolve`，代码如下所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>promise的API之resolve</title>
    </head>
    <body>
      <script> let p1 = Promise.resolve(123); //如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象 //如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果 let p2 = Promise.resolve(new Promise((resolve, reject) => { reject('error'); })); p2.catch(reason => { console.log(reason); }); </script>
    </body>
    </html>

1.  `promise` 的 `API` 之 `reject`，代码如下所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>promise的API之reject</title>
    </head>
    <body>
      <script> let p1 = Promise.reject('123'); let p2 = Promise.reject('456'); let p3 = Promise.reject(new Promise((resolve, reject) => { resolve('ok'); })); console.log(p3); </script>
    </body>
    </html>

1.  `promise` 的 `API` 之 `all`，代码如下所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>promise的API之all</title>
    </head>
    <body>
      <script> let p1 = new Promise((resolve, reject) => { resolve('ok1'); }); // let p2 = Promise.resolve('ok2') let p2 = Promise.reject('Error'); let p3 = Promise.resolve('ok3'); let result = Promise.all([p1, p2, p3]); console.log(result); </script>
    </body>
    </html>

1.  `promise` 的 `API` 之 `race`，代码如下所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>promise的API之race</title>
    </head>
    <body>
      <script> let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('ok'); }, 1000); }); let p2 = Promise.resolve('success'); let p3 = Promise.resolve('true'); // 调用 const result = Promise.race([p1, p2, p3]); console.log(result); </script>
    </body>
    </html>