【手撕系列】Promise 状态转换与结果处理(一)

简介: Promise 状态转换与结果处理

ea2c1009ffabe030aec03aabf949478.png

前言

Promise 是异步编程的一种解决方案,比传统的解决方案 —— 回调函数和事件(地狱回调)更加合理

所谓 Promise 简单说就是一个容器,里面保存着未来才会结束的事件结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息

系列会由浅入深,带大家一步步动手实现一个自己的 Promise,相信大家跟着一起做完,不管是平时工作中对 Promise 的应用,还是面试时对 Promise 相关问题的回答,都会更加的得心应手,废话不多,现在就来一起开始吧

Promise 类的声明

首先我们先从最简单的部分开始,声明一个自己的 Promise 类 MyPromise ,拥有 promise 基本的 3 个状态:pending,fulfilled,rejected(默认pending) ,然后包含我们平时经常使用到的功能 接收一个回调函数 callBack ,里面有 resolve,reject 方法来处理结果即可

class MyPromise {
    static pending = 'pending'
    static fulfilled = 'fulfilled'
    static rejected = 'rejected'
    constructor (callBack) {
        this.state = MyPromise.pending
        this.result = null
        this.error = null
        const resolve = (res) => {
            this.result = res
        }
        const reject = (error) => {
            this.error = error
        }
        callBack(resolve, reject)
        console.log('result:' + this.result)
        console.log('error:' + this.error)
    }
}
new MyPromise((resolve, reject) => {
    resolve(1)
    reject(2)
})
复制代码

好了,这样一个简单 Promise 类的结构就有了,我们来运行一下

e42d390ff8620648725b914e301998b.png

一切正常,可以接收到数据,但是不是感觉有点怪怪的,就是状态还没改过来,按 Promise 的规定它只能存在一种状态,并且fulfilled和rejected只能通过pending状态转换过去,而我们的类把 fulfilled和rejected 两种状态都处理了,显然是不符合要求的,现在我们把状态和根据状态处理结果的逻辑加上

class MyPromise {
    static pending = 'pending'
    static fulfilled = 'fulfilled'
    static rejected = 'rejected'
    constructor (callBack) {
        this.state = MyPromise.pending
        this.result = null
        this.error = null
        const resolve = (res) => {
            if (this.state === MyPromise.pending) {
                this.state = MyPromise.fulfilled
                this.result = res
            }
        }
        const reject = (error) => {
            if (this.state === MyPromise.pending) {
                this.state = MyPromise.rejected
                this.error = error
            }
        }
        callBack(resolve, reject)
        console.log('result:' + this.result)
        console.log('error:' + this.error)
    }
}
new MyPromise((resolve, reject) => {
    resolve(1)
    reject(2)
})
复制代码

这时运行下代码,我们的状态转化关系和结果处理就正常了

070e45b2cf93bb8bf533b2d7cd0190a.png

好了,本篇到此已经实现了一个简单 promise 的状态转化和结果处理,下一篇我会带着大家一起实现 promise 的 then 方法,敬请关注!

相关文章
|
安全 机器人 API
简单几步,钉钉机器人秒变通义千问对话机器人
通过阿里云计算巢AppFlow平台,无需编码,只需简单几步,即可将钉钉机器人转化为通义千问对话机器人。首先在灵积模型服务平台获取API Key,然后在AppFlow中配置连接器,授权并保存Webhook Url。在钉钉中创建自定义机器人,选择Outgoing功能,填写签名和Webhook地址。最后,@机器人即可开始对话。此外,还提供了通过钉钉开放平台创建机器人的步骤。AppFlow简化了集成过程,加速了企业自动化服务流程。
994 0
|
JavaScript 前端开发
JavaScript 获取地址栏指定参数(整理)
JavaScript 获取地址栏指定参数(整理)
|
JavaScript 应用服务中间件 nginx
vuecli3打包项目上线之后报错怎么使用本地的sourcemap文件定位调试?
vuecli3打包项目上线之后报错怎么使用本地的sourcemap文件定位调试?
392 0
|
存储 算法 关系型数据库
Mycat【Mycat分片技术(水平拆分-分表、ER表、全局表)】(五)-全面详解(学习总结---从入门到深化)
Mycat【Mycat分片技术(水平拆分-分表、ER表、全局表)】(五)-全面详解(学习总结---从入门到深化)
548 0
|
SQL 关系型数据库 MySQL
MySQL数据库的数据导入和导出操作指南
MySQL数据库的数据导入和导出操作指南
|
7月前
|
XML 前端开发 JavaScript
2025 年最新 CSS 面试题 100 道及详细答案解析
本文整理了100道CSS面试题及答案,涵盖基础概念、选择器与特性、布局(如Flexbox和Grid)、动画与过渡、响应式设计等核心内容。从CSS的基础知识如盒模型、`box-sizing`属性,到高级应用如伪类选择器(LVHA、CSS3新增伪类)和视觉格式化模型(BFC),帮助开发者系统掌握CSS技能。此外,还涉及浏览器兼容性、CSS优化及预处理器等内容,为前端工程师提供全面的学习资源。资源可从[此链接](https://pan.quark.cn/s/50438c9ee7c0)获取。
610 5
|
JavaScript 前端开发 Serverless
前端全栈之路Deno篇:Deno2.0与Bun对比,谁更胜一筹?可能Deno目前更适合serverless业务
在前端全栈开发中,Deno 2.0 和 Bun 作为新兴的 JavaScript 运行时,各自展现了不同的优势。Deno 2.0 重视安全性和多平台兼容性,尤其是对 Windows 的良好支持和原生 TypeScript 支持;而 Bun 则以卓越的性能和简便的开发体验著称,适合快速迭代的小型项目。两者在不同场景下各具特色,Deno 更适合企业级应用和serverless,Bun 则适用于追求速度的项目。
1773 2
|
Java 索引
Java“ExceptionInInitializerError”解决
Java中遇到“ExceptionInInitializerError”错误通常是因为静态初始化块或静态变量初始化时发生异常。解决方法包括检查静态代码块中的逻辑错误、确保资源正确加载以及处理可能的空指针异常。
2210 8
|
消息中间件 存储 数据安全/隐私保护
深入学习RabbitMQ五种模式(一)
深入学习RabbitMQ五种模式(一)
233 0

热门文章

最新文章