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

2023-02-21 157

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

前言

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 类的结构就有了，我们来运行一下

一切正常，可以接收到数据，但是不是感觉有点怪怪的，就是状态还没改过来，按 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)
})
复制代码