Promise源码解密-异步版

简介: Promise源码解密-异步版

系列文章

  1. Promise源码解密-PromisesA+标准
  2. Promise源码解密-同步版
  3. Promise源码解密-异步版
  4. Promise源码解密-then的链式调用
  5. Promise源码解密-catch/resolve/reject/race

创作不易 拒绝白嫖 点个赞呗

关注专栏 Promise源码解密,带你走进Promise的深处!!!


解决了啥

在同步版本中,我们在执行器中编写异步代码的情况下,

会导致先执行then,在执行异步的方法中的resolve或者reject。

所以我们就需要将then中接收到的方法转移到执行器中的异步方法中执行。

我们只需要将then接收到的方法,展示存起来,当调用到resolve/reject时,再执行then接收到的方法

代码

// 定义状态常量
const STATUS_PENDING = 'pending'
const STATUS_FULFILLED = 'fulfilled'
const STATUS_REJECTED = 'rejected'
class MyPromise {
    // 接收一个 执行器
    // new Promise的时候,执行器立即执行,
    // 执行的时候根据指定函数执行
    // 并且程序报错的情况下
    constructor(executor) {
        this.status = STATUS_PENDING
        this.value = undefined
        this.reason = undefined
        this.onFulfilledCallBacks = []
        this.onRejectCallBacks = []
        try {
            executor(this.resolve, this.reject)
        } catch (error) {
            //  报错的话直接将错误原因作为reason
            this.reject(error)
        }
    }
    // 这里为啥使用箭头函数而不是resolve(){}
    // 这是因为上面的executor调用的时候,resolve中的this其实是undefined
    // executor单独调用了resolve/reject 这时,这两个方法存在于执行是的环境,this不再指向实例
    // 箭头函数内部的this总是指向定义时所在的对象
    resolve = (value) => {
        // 判断状态是不是
        if (this.status === STATUS_PENDING) {
            console.log('执行resolve')
            // 这里接收传进来的结果
            this.value = value
            this.status = STATUS_FULFILLED
            // 如果有存放起来的then接收的函数,立即遍历执行,这样保证then方法还是最后调用
            this.onFulfilledCallBacks.forEach((fn) => {
                fn()
            })
        }
    }
    reject = (reason) => {
        if (this.status === STATUS_PENDING) {
            console.log('执行reject')
            // 这里接收传进来的错误的结果
            this.reason = reason
            this.status = STATUS_REJECTED
            this.onRejectCallBacks.forEach(fn => {
                fn()
            })
        }
    }
    then(onFulfilled, onReject) {
        console.log('执行then时的状态: ', this.status)
        if (this.status === STATUS_FULFILLED) {
            console.log("执行 onFulfilled")
            onFulfilled(this.value)
        }
        if (this.status === STATUS_REJECTED) {
            console.log("执行 onReject")
            onReject(this.reason)
        }
        // 如果状态是pending的话,暂时存放起来。
        // 在异步情况下,回先执行then,所以状态是pending
        if (this.status === STATUS_PENDING) {
            this.onFulfilledCallBacks.push(() => onFulfilled(this.value))
            this.onRejectCallBacks.push(() => onReject(this.reason))
        }
    }
}
let t = new MyPromise((resolve, reject) => {
    // 指定执行哪个,resolve和reject最终只会执行一个
    // console.log(a)  // 执行console会报错,最终只会执行reject
    // // resolve("res")
    // reject('reject')
    setTimeout(() => {
        resolve('异步执行结束')
    }, 1000)
})
t.then((res) => {
    console.log(res)
}, (error) => {
    console.log(error)
})

注意点

这里使用数组保存了then的回调函数

为啥是数组呢?

可能有多个then

//index.js
promise.then(value => {
    console.log(value)
})
promise.then(value => {
    console.log(value)
})
promise.then(value => {
    console.log(value)
})


相关文章
|
7月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
69 1
|
7月前
|
JavaScript 前端开发
如何处理 Vue 中的异步操作和 Promise?
如何处理 Vue 中的异步操作和 Promise?
140 1
|
1月前
|
前端开发 JavaScript
如何使用 Promise 处理异步并发操作?
通过使用 `Promise.all()` 和 `Promise.race()` 方法,可以灵活地处理各种异步并发操作,根据不同的业务需求选择合适的方法来提高代码的性能和效率,同时也使异步代码的逻辑更加清晰和易于维护。
|
1月前
|
存储 前端开发
除了 Promise.all(),还有哪些方法可以处理异步并发操作?
在上述示例中,`concurrentPromises` 函数接受一个Promise数组和最大并发数作为参数,通过手动控制并发执行的Promise数量,实现了对异步操作的并发控制,并在所有Promise完成后返回结果数组。
|
1月前
|
前端开发 数据处理
如何使用 Promise.all() 处理异步并发操作?
使用 `Promise.all()` 可以方便地处理多个异步并发操作,提高代码的执行效率和可读性,同时通过统一的 `.catch()` 方法能够有效地处理异步操作中的错误,确保程序的稳定性。
|
1月前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
1月前
|
前端开发 JavaScript 开发者
用 Promise 处理异步操作的优势是什么?
综上所述,使用Promise处理异步操作能够有效地解决传统回调函数带来的诸多问题,提高代码的质量、可读性、可维护性和可扩展性,是JavaScript中进行异步编程的重要工具和技术。
|
3月前
|
前端开发 JavaScript
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
该文章教授了如何使用Promise和async/await来解决异步编程问题,从而避免回调地狱,使代码更加清晰和易于管理。
解决异步问题,教你如何写出优雅的promise和async/await,告别callback回调地狱!
|
5月前
|
前端开发 JavaScript
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
164 1
|
7月前
|
前端开发 JavaScript 安全
Promise/A+ 规范详解:打造健壮异步代码的必备知识(上)
Promise/A+ 规范详解:打造健壮异步代码的必备知识(上)
Promise/A+ 规范详解:打造健壮异步代码的必备知识(上)