备案控制台
开发者社区 开发与运维 文章 正文

Promise 学习笔记

2022-06-25 120
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Promise 学习笔记
前言：如果这篇文章 对你有帮助，请不要吝啬你的赞。😃

一直有在用 Promise，但是没有系统学过 Promise，自然也不知道原理。现在就来学习一波。

1. 介绍

Promise 是 JS 中进行异步编程的新解决方案。在这之前使用过回调函数进行异步编程。

Promise 是一个构造函数，Promise 对象用来封装一个异步操作并可以获取其成功或失败的结果值

Promise 优点

  1. 支持链式调用，可解决回调地狱问题

    回调地狱：回调函数嵌套使用

image-20220225162417514

**回调地狱导致的问题**：
  • 阅读困难（后期维护麻烦）
  • 不便于异常处理

  1. 指定回调函数的方式更灵活

    • Promise：启动异步任务 => 返回 Promise 对象 => Promise 对象绑定回调函数
    • 纯用回调函数：必须在启动异步任务前指定

2. Promise 体验

2.1 抽奖

先来一个抽奖示例(隔 1s 后出结果)

2.1.1 回调函数版本

<!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>
    <button class="btn" id="btn">抽奖</button>

    <script>
      function rand() {
        return Math.floor(Math.random() * 100 + 1); // 返回1到100之前的随机数
      }

      const btn = document.querySelector("#btn");

      btn.addEventListener("click", function () {
        setTimeout(() => {
          let n = rand();

          if (n <= 50) {
            alert("恭喜你中奖了");
          } else {
            alert("很遗憾，你没有中奖");
          }
        }, 1000);
      });
    </script>
  </body>
</html>

promise

2.1.2 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>
    <button class="btn" id="btn">抽奖</button>

    <script>
      function rand() {
        return Math.floor(Math.random() * 100 + 1); // 返回1到100之前的随机数
      }

      const btn = document.querySelector("#btn");

      btn.addEventListener("click", function () {
        const p = new Promise((resolve, reject) => {
          // resolve 成功后执行的函数
          // reject 失败后执行的函数

          let n = rand();

          setTimeout(() => {
            if (n <= 50) {
              resolve(n); // 可以将Promise的状态设置为成功
            } else {
              reject(n); // 可以将Promise的状态设置为失败
            }
          }, 1000);
        });

        p.then(
          // 通过then方法指定成功或失败时的回调函数，第一个参数是成功时的回调，第二个参数是失败时的回调
          (value) => {
            alert(`恭喜你，中奖了，中奖号码是${value}`);
          },
          (value) => {
            alert(`真遗憾，你没有中奖，中奖号码是${value}`);
          }
        );
      });
    </script>
  </body>
</html>

2.2 文件读取

2.2.1 回调函数版本

const fs = require("fs");

fs.readFile("./resource/content.txt", (err, data) => {
  if (err) {
    throw err;
  }

  console.log(data.toString());
});

2.2.2 Promise 版本

const fs = require("fs");

let p = new Promise((resolve, reject) => {
  fs.readFile("./resource/content1.txt", (err, data) => {
    if (err) {
      reject(err);
    } else {
      resolve(data);
    }
  });
});

p.then(
  (value) => {
    console.log(value.toString());
  },
  (reason) => {
    console.log(reason);
  }
);

img

2.3 AJAX

2.3.1 原生版本(回调函数)

<!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封装AJAX</title>
  </head>

  <body>
    <script>
      (function () {
        // 1. 创建对象
        const xhr = new XMLHttpRequest();

        // 2. 初始化
        xhr.open("GET", "https://qcgx2i.api.cloudendpoint.cn/hello"); // 接口可能会无效，换一个有效的就行

        // 3. 发送
        xhr.send();

        // 4. 处理响应结果
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              console.log(xhr.response);
            } else {
              console.log(xhr.status);
            }
          }
        };
      })();
    </script>
  </body>
</html>

image-20220225174738518

2.3.2 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封装AJAX</title>
  </head>

  <body>
    <script>
      (function () {
        const p = new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();

          xhr.open("GET", "https://qcgx2i.api.cloudendpoint.cn/hello");

          xhr.send();

          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response); // 成功
              } else {
                reject(xhr.status);
              }
            }
          };
        });

        p.then(
          (data) => {
            console.log(data);
          },
          (statusCode) => {
            console.warn(statusCode);
          }
        );
      })();
    </script>
  </body>
</html>

3. 转化为 Promise 风格(promisify)

util.promisify()：传入一个遵循常见的错误优先的回调风格的函数(即以 (err, value) => {...}作为最后一个参数)，并返回 Promise 版本。

const fs = require("fs");
const { promisify } = require("util");

let pReadfile = promisify(fs.readFile); // 把callback形式的异步api转化成promise形式的

pReadfile("./resource/content.txt").then((value) => {
  console.log(value.toString());
});

4. Promise 属性

4.1 Promise 状态

实例对象中的一个属性 [[PromiseState]]，有三个值

  • pending：未决定
  • resolved(fulfilled)：成功
  • rejected：失败

Promise 的状态改变只有两种可能，且只能改变一次：

  • pending 变为 resolved
  • pending 变为 rejected

成功的结果数据一般称为 value，失败的结果一般称为 reason

4.2. Promise 对象的值

实例对象中的一个属性 [[PromiseResult]]，保存着异步任务成功或失败的结果

只能通过resolve()或reject()对 PromiseResult进行修改

const fs = require("fs");

let p = new Promise((resolve, reject) => {
  fs.readFile("./resource/content1.txt", (err, data) => {
    if (err) {
      reject(err); // 通过reject()设置PromiseResult的值
    } else {
      resolve(data);
    }
  });
});

p.then(
  (value) => {
    // 把PromiseResult的值取出来，进行相关操作
    console.log(value.toString());
  },
  (reason) => {
    console.log(reason);
  }
);

5. Promise 工作流程

image-20220226145957472

6. Promise API

6.1 构造函数 Promise(excutor)

excutor 函数：执行器, (resolve, reject) => {}

resolve 函数：内部定义成功后调用的函数

reject 函数：内部定义失败后调用的函数

构造函数会在 Promise 立即同步调用，异步操作在执行器中执行

let p = new Promise((resolve, reject) => {
  console.log(1);
});

console.log(2);

// 先输出1，再输出2

6.2 Promise.prototype.then 方法

语法： promise.then(onResolved, onRejected)

onResolved 函数：成功的回调函数, value => {}

onRejected 函数：失败的回调函数, reason => {}

返回新的 Promise 对象

6.3 Promise.prototype.catch 方法

**与上面的 then()类似，不过只能指定失败的回调函数

6.4 Promise.resolve 方法

作用：接受一个参数，返回一个成功或失败的 Promise 对象。能够快速封装一个值，将这个值转化为 Promise 对象

  • 如果传入的参数是非 Promise 类型的对象，如字符串、数字等，则放回的结果是成功的 Promise 对象
  • 如果传入的参数是Promise 对象，则参数的结果决定 resolve 的结果，即参数是成功的 Promise 对象的话，resolve 的结果是成功的，反之是失败的
const p1 = Promise.resolve(123); // Promise { 123 }

console.log(p1);

const p2 = Promise.resolve(p1); // 参数为成功的Promise对象

console.log(p2);

const p3 = Promise.resolve(
  new Promise((resolve, reject) => {
    // 参数为失败的Promise对象
    reject("Error");
  })
);

p3.catch((reason) => {
  console.log(reason);
});

6.5 Promise.reject 方法

接受一个参数，返回一个失败的 Promise 对象

const p1 = Promise.reject(123);
console.log(p1);

const p2 = Promise.reject(
  new Promise((resolve, reject) => {
    resolve("传参为成功的Promise对象");
  })
);

console.log(p2);

image-20220226153204273

6.5 Promise.all 方法

参数：promises，promise 的数组

返回一个新的 Promise，当所有的 promise 都成功才成功，且结果为成功的结果组成的数组；有一个失败就直接失败，返回的结果就是失败的那一个的结果

const p1 = new Promise((resolve, reject) => {
  resolve("p1: OK");
});
const p2 = Promise.resolve("p2: OK");
const result1 = Promise.all([p1, p2]); // 所有Promise的结果都成功
console.log(result1);

const p3 = Promise.resolve("p3: OK");
const p4 = Promise.reject("p4: Err");
const p5 = Promise.reject("p5: Err");
const result2 = Promise.all([p3, p4, p5]); // 有Promise的结果失败
console.log(result2);

image-20220226170629148

如果想要捕捉异常，直接链式调用即可

const p3 = Promise.resolve("p3: OK");
const p4 = Promise.reject("p4: Err");
const p5 = Promise.reject("p5: Err");
const result2 = Promise.all([p3, p4, p5]);
console.log(result2);

result2.catch((reason) => {
  console.log(reason);
});

image-20220226170913348

Promise.all()传入一个空数组，立即返回成功。

6.6 Promise.race 方法

参数：promises，promise 的数组

返回一个新的 Promise，第一个完成的结果是成功则成功，反之则失败

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("p1: OK");
  });
});
const p2 = Promise.reject("p2: Err");
const result1 = Promise.race([p1, p2]);
console.log(result1); // [[PromiseResult]]: "p2: Err"

result1.catch((reason) => {
  console.log(reason);
});

Promise.race()传入空数组不做任何操作

文章标签：
JavaScript
前端开发
API
赤蓝紫
目录
相关文章
Goodluck-dys
|
22天前
|
前端开发 API 容器
说说你对 promise 的了解
说说你对 promise 的了解
Goodluck-dys
13 0
张思睿ZGQ
|
22天前
|
前端开发
【学习笔记】Promise
【学习笔记】Promise
张思睿ZGQ
21 0
凯小默
|
8月前
|
前端开发 JavaScript 测试技术
6 # 实现简单的 promise
6 # 实现简单的 promise
凯小默
22 0
zrblue
|
22天前
|
前端开发 JavaScript
Promise 详解
Promise 详解
zrblue
34 0
快乐阿超
|
6月前
|
前端开发
Promise
Promise
快乐阿超
34 1
__爱吃香菜
|
10月前
|
前端开发
对promise的理解分享
对promise的理解分享
__爱吃香菜
46 0
demo123567
|
11月前
|
前端开发 JavaScript
深入理解Promise
深入理解Promise
demo123567
70 0
游客qaajrr4nrhqw4
|
前端开发 JavaScript API
Promise入门
Promise入门
游客qaajrr4nrhqw4
99 0
Promise入门
纸飞机博客
|
前端开发 JavaScript
探索Promise的应用
探索Promise的应用
纸飞机博客
85 0
worlds
|
前端开发 API
对promise的一点了解
所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。
worlds
93 0

热门文章

最新文章

  • 1
    Linux镜像源 国内列表
  • 2
    阿里云轻量应用服务器和ECS云服务器区别及选择方法
  • 3
    封装之打线简介
  • 4
    Log
  • 5
    flash快捷键
  • 6
    牛客网-《剑指offer》-跳台阶
  • 7
    2015至2025 光伏成本下降57%
  • 8
    日本预计于2023年普及5G通信
  • 9
    私募股权公司KKR拟160亿美元收购东芝芯片部门
  • 10
    dump命令3——dump数据文件
  • 1
    基于ssm+vue.js+uniapp小程序的水果商城附带文章和源代码部署视频讲解等
    120
  • 2
    基于ssm+vue.js+uniapp小程序的汇美食电子商城附带文章和源代码部署视频讲解等
    146
  • 3
    基于ssm+vue.js+uniapp小程序的在线学习系统附带文章和源代码部署视频讲解等
    138
  • 4
    基于ssm+vue.js+uniapp小程序的学报稿件管理系统附带文章和源代码部署视频讲解等
    135
  • 5
    基于ssm+vue.js+uniapp小程序的课程辅导网站附带文章和源代码部署视频讲解等
    131
  • 6
    基于ssm+vue.js+uniapp小程序的高校实验室信息化综合管理平台附带文章和源代码部署视频讲解等
    117
  • 7
    基于ssm+vue.js+uniapp小程序的医院管理系统附带文章和源代码部署视频讲解等
    98
  • 8
    基于ssm+vue.js+uniapp小程序的布卡维纳红酒网页附带文章和源代码部署视频讲解等
    109
  • 9
    基于ssm+vue.js+uniapp小程序的汽车售后服务管理系统附带文章和源代码部署视频讲解等
    86
  • 10
    基于ssm+vue.js+uniapp小程序的公益网站附带文章和源代码部署视频讲解等
    79

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考