js中promise原理及手动基本实现_V1

 

      前言

这几天面试过程，有个面试官突然跟我抠上了promise的实现原理，虽然有所准备，但是没能清晰地说出其中的原理，所以有点遗憾!!!，但是事已至此，只能默默去查了相关资料深入其中了解一番。因此就有了以下4篇抠promise原理的文章，4篇文章由简入繁，此篇文章为版本1，实现过程尽可能比较简洁，虽然没有遵循相当的编码规范，但同时杜绝了长篇大论，希望能更好地带给各位初学者其中的实现思路，也希望大家能喜欢吧。@-@

下一章链接：https://blog.csdn.net/weixin_42344533/article/details/117622308

     过程

 好废话不多说，下面，本人将结合实现过程中的一些图片，展现实现过程中的步骤。

1、版本1实现promise对象效果图

2、下图中是对象的基本结构，定义了promise中的3个状态，定义了其中的对象属性，对象方法init以及then方法

3、init方法实现细节，通过接收外部传进来的函数，实例化promise对象。

其中，如果外部函数执行了resolve()方法，则实例对象内部的status则由pending状态变为resolved，内部的result则被赋值为resolve方法传进来的参数；

反之如果执行了reject()方法，状态则由pending状态变为rejected，内部的result则被赋值为reject方法传进来的参数。

4、then方法实现细节，通过接收外部的函数res与rea作为参数，然后通过判断this.status的状态来决定执行哪个方法体。需要注意的是，执行的方法体必须被包裹于setTimeout内，实现异步调用。

总结 

实例化promise对象后，状态已经被改变，然后then方法通过判断状态来决定执行哪个函数体。

基本实现源码myPromise_v1.js：

const RESOLVE = 'resolved'
const REJECT = 'rejected'
const PENDING = 'pending'

function selfPromise(exe){
    this.status = PENDING
    this.result = undefined
    this.reason = undefined
    this.init = (exe)=>{
        const resolve = (result)=>{
            if(this.status === PENDING){
                this.result = result
                this.status = RESOLVE
            }
        }
        const reject = (reason)=>{
            if(this.status === PENDING){
                this.reason = reason
                this.status = REJECT
            }
        }
        exe(resolve,reject);
    }
    this.init(exe)
    this.then = (onResolve,onReject)=>{
            if(this.status === RESOLVE){
                setTimeout(()=>{
                    onResolve(this.result)
                },0)
            }
            if(this.status === REJECT){
                setTimeout(()=>{
                    onReject(this.reason)
                },0)               
            }
    }
}

module.exports = selfPromise

测试案例test.js：

const myPromise = require('./myPromise_v1')

var test = new myPromise((resolve,reject)=>{
    resolve("这是手动实现的promise")
    //reject("不满足条件时")
})

test.then(res=>{
        console.log(res)
    })

console.log("同步代码")

下一章链接：https://blog.csdn.net/weixin_42344533/article/details/117622308