Promise 的 API 理解与使用

93 阅读 0 评论 62 点赞

我是靠谱客的博主英勇月亮，最近开发中收集的这篇文章主要介绍Promise 的 API 理解与使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、promise 的 API 说明

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、promise API 的使用

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>

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>

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>

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>

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>