Promise 的关键问题理解及使用

骑猪看日落 2022-08-29 00:28 183阅读 0赞

#### 一、promise 的关键问题 ####

1.  如何改变 `promise` 的状态，如下所示：

*  `resolve(value)`: 如果当前是 `pending` 就会变为 `resolved`
 *  `reject(reason)`: 如果当前是 `pending` 就会变为 `rejected`
 *  抛出异常: 如果当前是 `pending` 就会变为 `rejected`

1.  一个 `promise` 指定多个成功/失败回调函数, 都会调用吗，如下所示：

*  当 `promise` 改变为对应状态时都会调用

1.  改变 `promise` 状态和指定回调函数谁先谁后，如下所示：

*  都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
 *  如何先改状态再指定回调，在执行器中直接调用 `resolve()/reject()`，延迟更长时间才调用 `then()`
 *  如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
 *  如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

1.  `promise.then()` 返回的新 `promise` 的结果状态由什么决定，如下所示：

*  简单表达: 由 `then()` 指定的回调函数执行的结果决定
 *  如果抛出异常, 新 `promise` 变为 `rejected`, `reason` 为抛出的异常
 *  如果返回的是非 `promise` 的任意值, 新 `promise` 变为 `resolved`, `value` 为返回的值
 *  如果返回的是另一个新 `promise`, 此 `promise` 的结果就会成为新 `promise` 的结果

5.`promise` 如何串连多个操作任务，如下所示：

*  `promise` 的 `then()` 返回一个新的 `promise`, 可以开成 `then()` 的链式调用
 *  通过 `then` 的链式调用串连多个同步/异步任务

1.  `promise` 异常传透，如下所示：

*  当使用 `promise` 的 `then` 链式调用时, 可以在最后指定失败的回调
 *  前面任何操作出了异常, 都会传到最后失败的回调中处理

1.  中断 `promise` 链，如下所示：

*  当使用 `promise` 的 `then` 链式调用时, 在中间中断, 不再调用后面的回调函数
 *  办法: 在回调函数中返回一个 `pendding` 状态的 `promise` 对象

#### 二、promise 的关键问题使用 ####

1.  `Promise` 对象状态改变的方式，代码如下所示：

<!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 对象状态改变的方式</title>
    </head>
    <body>
      <script> let p = new Promise((resolve, reject) => { // resolve 函数 // pending => fulfilled (resolved) resolve('ok'); // reject 函数 // reject("error");// pending => rejected reject('error'); // 抛出错误 throw '出问题'; }); console.log(p); </script>
    </body>
    </html>

1.  `Promise` 指定多个回调，代码如下所示：

1.  `Promise` 改变状态与指定回调的顺序，代码如下所示：

1.  `Promise then` 方法的返回结果特点，代码如下所示：

<!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 then方法的返回结果特点</title>
    </head>
    <body>
      <script> let p = new Promise((resolve, reject) => { resolve('ok'); }); // 执行 then 方法 let result = p.then(value => { // console.log(value); //1. 抛出错误 throw '出问题'; //2. 返回结果是非 Promise 类型的对象 return '123'; //3. 返回结果是 Promise 对象 return new Promise((resolve, reject) => { resolve('success'); reject('error'); }); }, reason => { console.log(reason); }); console.log(result); </script>
    </body>
    </html>

1.  `Promise` 如何串联多个任务，代码如下所示：

<!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 如何串联多个任务</title>
    </head>
    <body>
      <script> let p = new Promise((resole, reject) => { setTimeout(() => { resole('ok'); }, 1000); }); p.then(value => { return new Promise((resolve, reject) => { resolve('success'); }); }).then(value => { console.log(value); }).then(value => { console.log(value); }); </script>
    </body>
    </html>

1.  `promise` 异常穿透，代码如下所示：

<!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 异常穿透</title>
    </head>
    <body>
      <script> let p = new Promise((resolve, reject) => { setTimeout(() => { resolve('ok'); // reject('err'); }, 1000); }); p.then(value => { console.log('111'); throw '失败！'; }).then(value => { console.log('222'); }).then(value => { console.log('333'); }).catch(reason => { console.warn(reason); }); </script>
    </body>
    </html>

1.  `promise` 中断链条，代码如下所示：

<!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 中断链条</title>
    </head>
    <body>
      <script> let p = new Promise((resolve, reject) => { setTimeout(() => { resolve('ok'); }, 1000); }); p.then(value => { console.log('111'); return new Promise(() => { }); }).then(value => { console.log('222'); }).then(value => { console.log('333'); }).catch(reason => { console.warn(reason); }); </script>
    </body>
    </html>