带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(1)

简介: 带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(1)

二十七、实现符合Promise/A+规范的Promise

1.介绍

PromiseJavaScript中处理异步操作的重要工具之一。Promise/A+规范是一种关于Promise实现的标准,它定义了Promise的行为和方法。本文将详细介绍如何实现Promise/A+规范,让你了解Promise的工作原理并能够自己实现一个符合规范的Promise

2.Promise/A+规范简介

1Promise的三种状态:

  • pending(进行中):Promise的初始状态,表示异步操作正在执行。
  • fulfilled(已完成):异步操作成功完成,并返回一个值,称为解决值(fulfillment value)。
  • rejected(已拒绝):异步操作失败或被拒绝,并返回一个原因(reason),通常是一个错误对象。

2 状态转换:

  • Promise的状态只能从pending转变为fulfilled或rejected,一旦转变就不可逆转。
  • 状态转换是由异步操作的结果决定的。如果异步操作成功完成,Promise的状态会转变为fulfilled;如果异步操作失败或被拒绝,Promise的状态会转变为rejected

3 Promise的基本方法:

  • then方法:用于注册异步操作成功完成时的回调函数,并返回一个新的Promise对象。它接受两个参数:onFulfilled(可选,异步操作成功时的回调函数)和onRejected(可选,异步操作失败时的回调函数)。
  • catch方法:用于注册异步操作失败时的回调函数,并返回一个新的Promise对象。它是then方法的一个特殊形式,仅用于捕获异常。
  • finally方法:无论异步操作成功或失败,都会执行的回调函数,并返回一个新的Promise对象。它在Promise链中的最后执行,并且不接收任何参数。

4 错误冒泡和异常传递:

  • Promise/A+规范要求Promise的错误能够被适当地捕获和处理。当一个Promise发生错误时,它会向下传播,直到找到最近的错误处理函数为止。
  • Promise链中的任何一个Promise发生错误,都会导致整个链上的错误处理函数被调用,以便进行错误处理和恢复。

遵循Promise/A+规范的实现应该具备上述特性,以确保一致的Promise行为和接口。这样,开发者可以编写通用的异步代码,而无需担心特定Promise实现的差异性。

3.实现Promise

当从零开始实现 Promise/A+ 规范的 Promise,我们需要逐步构建 Promise 的核心功能,包括状态管理、状态转换、回调处理和错误处理。

步骤 1: 创建 Promise 构造函数

首先,我们需要创建一个 Promise 构造函数,它接受一个执行器函数作为参数。执行器函数接受两个参数,即 resolve reject 函数,用于控制 Promise 的状态转换。

function MyPromise(executor) {
  // TODO: 实现构造函数}

步骤 2: 初始化 Promise 状态和回调

在构造函数中,我们需要初始化 Promise 的状态和回调数组。状态可以使用一个变量来表示,初始值为 'pending'。回调数组用于存储注册的成功和失败回调函数。

function MyPromise(executor) {
  var self = this;
  self.state = 'pending';
  self.value = undefined;
  self.reason = undefined;
  self.onFulfilledCallbacks = [];
  self.onRejectedCallbacks = [];
  // TODO: 实现构造函数的其余部分}


带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(2)https://developer.aliyun.com/article/1349506?groupCode=tech_library

相关文章
|
5天前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
16 4
|
5天前
|
Web App开发 JavaScript 前端开发
《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
【5月更文挑战第3天】本文介绍了如何在Web自动化测试中使用JavaScript执行器(JavascriptExecutor)来完成Selenium API无法处理的任务。首先,需要将WebDriver转换为JavascriptExecutor对象,然后通过executeScript方法执行JavaScript代码。示例用法包括设置JS代码字符串并调用executeScript。文章提供了两个实战场景:一是当时间插件限制输入时,用JS去除元素的readonly属性;二是处理需滚动才能显示的元素,利用JS滚动页面。还给出了一个滚动到底部的代码示例,并提供了详细步骤和解释。
32 10
|
2天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
2天前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
5天前
|
存储 JavaScript 前端开发
Javascript教程
Javascript教程
9 0
|
5天前
|
JavaScript 前端开发 Java
《手把手教你》系列技巧篇(四十)-java+ selenium自动化测试-JavaScript的调用执行-下篇(详解教程)
【5月更文挑战第4天】本文介绍了如何使用JavaScriptExecutor在自动化测试中实现元素高亮显示。通过创建并执行JS代码,可以改变元素的样式,例如设置背景色和边框,以突出显示被操作的元素。文中提供了一个Java示例,展示了如何在Selenium中使用此方法,并附有代码截图和运行效果展示。该技术有助于跟踪和理解测试过程中的元素交互。
12 0
|
5天前
|
JavaScript 前端开发
JavaScript高级主题:什么是 ES6 的解构赋值?
【4月更文挑战第13天】ES6的解构赋值语法简化了从数组和对象中提取值的过程,提高代码可读性。例如,可以从数组`[1, 2, 3]`中分别赋值给`a`, `b`, `c`,或者从对象`{x: 1, y: 2, z: 3}`中提取属性值给同名变量。
18 6
|
5天前
|
存储 JavaScript 前端开发
JavaScript高级主题:JavaScript 中的 Map 和 Set 是什么?它们有什么区别?
JavaScript的ES6引入了Map和Set数据结构。Map用于存储键值对,适合通过键进行查找,而Set则存储唯一值,无键且不支持键查找。两者在性能上表现出色,尤其在频繁的写入删除操作中。选择使用哪个取决于具体应用场景:键值对需求选Map,独特值集合则选Set。
20 2
|
5天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(六)
JavaScript高级笔记-coderwhy版本
75 0
|
5天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(五)
JavaScript高级笔记-coderwhy版本
101 0