Promise 自定义封装

最新推荐文章于 2024-05-23 11:18:33 发布

龖龖龖

最新推荐文章于 2024-05-23 11:18:33 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/zms2000919/article/details/115253563

版权

本文详细探讨了如何自定义封装Promise，从resolve和reject的基本结构搭建到代码实现，阐述了throw如何抛出异常来改变Promise状态，并强调了Promise对象状态的不可变性。接着，深入讲解了then方法执行回调的机制，包括同步和异步任务的处理，以及如何指定并执行多个回调。最后，针对then方法进行了优化和完善。

摘要由CSDN通过智能技术生成

一、Promise 自定义封装


## 1. 初始结构搭建

```html
<script>
        // 实例化对象
        let p = new Promise((resolve, reject) => {
   
            resolve('OK')
        })

        p.then(value => {
   
            console.log(value);
        }, reason => {
   
            console.warn(reason);
        })
</script>

function Promise(executor) {
   

}

// 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected) {
   

}

2. resolve 与 reject 结构搭建

function Promise(executor) {
   
    // resolve 函数
    function resolve(data) {
   

    }
    // reject 函数
    function reject(data) {
   

    }
    // 同步调用 【执行器函数】
    executor(resolve, reject)
}

// // 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected) {
   

}

3. resolve 与 reject 代码实现

<script>
        // 实例化对象
        let p = new Promise((resolve, reject) => {
    
            resolve('OK')
        })
        
        console.log(p);

        p.then(value => {
    
            console.log(value);
        }, reason => {
    
            console.warn(reason);
        })
</script>

function Promise(executor) {
   
    // 添加属性
    this.PromiseState = 'pending'
    this.PromiseResult = null
    // 保存实例对象的 this 的值
    const self = this
    // resolve 函数
    function resolve(data) {
   
        // 1. 修改对象的属性 （PromiseState）
        self.PromiseState = 'fulfilled'
        // 2. 修改对象的结果值 （PromiseResult）
        self.PromiseResult = data
    }
    // reject 函数
    function reject(data) {
   
        // 1. 修改对象的属性 （PromiseState）
        self.PromiseState = 'rejected'
        // 2. 修改对象的结果值 （PromiseResult）
        self.PromiseResult = data
    }
    // 同步调用 【执行器函数】
    executor(resolve, reject)
}

// // 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected) {
   

}

4. throw 抛出异常改变状态

<script>
        // 实例化对象
        let p = new Promise((resolve, reject) => {
    
            // resolve('OK')
            throw new Error('error')
        })

        console.log(p);

        p.then(value => {
    
            console.log(value);
        }, reason => {
    
            console.warn(reason);
        })
</script>

function Promise(executor) {
   
    // 添加属性
    this.PromiseState = 'pending'
    this.PromiseResult = null
    // 保存实例对象的 this 的值
    const self = this
    // resolve 函数
    function resolve(data) {
   
        // 1. 修改对象的属性 （PromiseState）
        self.PromiseState = 'fulfilled'
        // 2. 修改对象的结果值 （PromiseResult）
        self.PromiseResult = data
    }
    // reject 函数
    function reject(data) {
   
        // 1. 修改对象的属性 （PromiseState）
        self.PromiseState = 'rejected'
        // 2. 修改对象的结果值 （PromiseResult）
        self.PromiseResult = data
    }
    try {
   
        // 同步调用 【执行器函数】
        executor(resolve, reject)
    } catch (error) {
   
        // 修改 Promise 对象的状态为失败
        reject(error)
    }
}

// // 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected) {
   

}

5. Promise 对象只能修改一次

<script>
        // 实例化对象
        let p = new Promise((resolve, reject) => {
    
            resolve('OK')
            reject('error')
            // throw new Error('error')
        })

        console.log(p);

        p.then(value => {
    
            console.log(value);
        }, reason => {
    
            console.warn(reason);
        })
</script>

function Promise(executor) {
   
    // 添加属性
    this.PromiseState = 'pending'
    this.PromiseResult = null
    // 保存实例对象的 this 的值
    const self = this
    // resolve 函数
    function resolve(data)