【手撕系列】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 方法,敬请关注!

相关文章
|
8月前
|
前端开发 JavaScript API
链式编程艺术:探索 Promise 链的美妙之处
链式编程艺术:探索 Promise 链的美妙之处
|
7月前
|
JavaScript 前端开发
杨校老师课堂之JavaScript定时器案例的红绿灯设计--原始写法
杨校老师课堂之JavaScript定时器案例的红绿灯设计--原始写法
52 0
|
8月前
|
前端开发 JavaScript
【Javascript】手撕Promise
【Javascript】手撕Promise
|
消息中间件 前端开发 NoSQL
蔚来手撕代码题:三个线程循环打印ABC
蔚来手撕代码题:三个线程循环打印ABC
115 3
蔚来手撕代码题:三个线程循环打印ABC
|
设计模式 监控 Java
案例18-面向对象之开门小例子
面向对象之开门小例子
133 0
|
XML 数据可视化 安全
给 DSL 开个脑洞:无状态的状态机
什么是 DSL ?DSL 是一种工具,其核心价值在于提供了一种手段,可以更加清晰地就系统某部分的意图进行沟通。本文将通过实现一个状态机引擎来看清 DSL 的本质,介绍状态机的核心模型和 Fluent 接口,并解决状态机的性能问题。
1755 0
给 DSL 开个脑洞:无状态的状态机
|
开发工具
彻底搞清游戏开发中的循环逻辑
循环是游戏开发中一定会用到的逻辑,不论是你想控制移动,或者进行遍历,亦或者不停的去执行某一段逻辑,都需要使用循环。那么对于循环的使用你彻底了解了吗?今天这篇文章就帮助你彻底的弄懂微信小游戏开发中的循环的用法。
179 0
|
Serverless C语言 Python
学编程这么久,还傻傻分不清什么是方法(method),什么是函数(function)?
在标准库inspect 中,它提供了两个自省的函数,即 ismethod() 和 isfunction(),可以用来判断什么是方法,什么是函数。
329 0
学编程这么久,还傻傻分不清什么是方法(method),什么是函数(function)?
复习单片机:流水灯(内含2种方法(左移操作符法+crol法)+设计思路+原始代码)
复习单片机:流水灯(内含2种方法(左移操作符法+crol法)+设计思路+原始代码)
1517 0
复习单片机:流水灯(内含2种方法(左移操作符法+crol法)+设计思路+原始代码)