Promise源码解密-同步版

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


系列文章

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

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

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


实现代码

// 定义状态常量
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
        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
        }
    }
    reject = (reason) => {
        if (this.status === STATUS_PENDING) {
            console.log('执行reject')
            // 这里接收传进来的错误的结果
            this.reason = reason
            this.status = STATUS_REJECTED
        }
    }
    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)
        }
    }
}

实例1

let t = new MyPromise((resolve, reject) => {
    // 指定执行哪个,resolve和reject最终只会执行一个
    // console.log(a)  // 执行console会报错,最终只会执行reject
    resolve("res")
    reject('reject')
})
t.then((res) => {
    console.log(res)
}, (error) => {
    console.log(error)
})
当不执行console.log(a)的时候执行的是resolve
否则 执行的reject

实例2

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)
})
这里面写了一个异步事件,根据js执行机制,输出的结果是:
执行then时的状态:  pending
执行resolve
看出先执行了同步的then,然后执行异步


相关文章
|
前端开发 JavaScript
web前端面试高频考点——JavaScript 篇(二)【JS 异步进阶】Event Loop、then 和 catch、async/await、宏任务微任务、手撕 Promise 源码
web前端面试高频考点——JavaScript 篇(二)【JS 异步进阶】Event Loop、then 和 catch、async/await、宏任务微任务、手撕 Promise 源码
151 0
|
前端开发
前端学习案例12-promise源码实现4
前端学习案例12-promise源码实现4
60 0
前端学习案例12-promise源码实现4
|
前端开发
前端学习案例12-promise源码实现4
前端学习案例12-promise源码实现4
45 0
前端学习案例12-promise源码实现4
|
前端开发
前端学习案例13-promise源码实现5
前端学习案例13-promise源码实现5
62 0
前端学习案例13-promise源码实现5
|
前端开发
前端学习案例13-promise源码实现5
前端学习案例13-promise源码实现5
45 0
前端学习案例13-promise源码实现5
|
前端开发
8、同步与异步(回调、Promise、async函数)
8、同步与异步(回调、Promise、async函数)
106 0
|
前端开发 Java
从源码上理解Netty并发工具-Promise
最近一直在看Netty相关的内容,也在编写一个轻量级的RPC框架来练手,途中发现了Netty的源码有很多亮点,某些实现甚至可以用「苛刻」来形容。另外,Netty提供的工具类也是相当优秀,可以开箱即用。这里分析一下个人比较喜欢的领域,并发方面的一个Netty工具模块 - Promise。
230 0
从源码上理解Netty并发工具-Promise
|
前端开发
遵循Promises/A+规范,手把手带你实现Promise源码(核心篇)
遵循Promises/A+规范,手把手带你实现Promise源码(核心篇)
153 0
遵循Promises/A+规范,手把手带你实现Promise源码(核心篇)
|
前端开发 API 数据库
Promise你把握不住?来看看异步转同步改造(下)
Promise你把握不住?来看看异步转同步改造
92 0
Promise你把握不住?来看看异步转同步改造(下)
|
消息中间件 SQL 缓存
Promise你把握不住?来看看异步转同步改造(上)
Promise你把握不住?来看看异步转同步改造
203 0
Promise你把握不住?来看看异步转同步改造(上)