面试题

const MyPromise=()=>{}

  const myPromise = new MyPromise((resolve) => {

            setTimeout(() => { resolve('hellow world') }, 2000)

        })

        myPromise.then((res) => {

            console.log(res)

            return "00"

        })

手写promise，面试了一个面试题，promise的标准是非常的复杂的，但是这里我们不探讨具体promise的实现，只正对上面的代码分析

代码拆解

MyPromise接受了一个函数类型的参数，该函数类型又接受了一个resolve函数参数
MyPromise执行后可以无限的then
步骤1里面的两个函数的执行都比步骤2里面的【then函数】执行慢，注意不是then函数里面的【参数函数】

根据表象看本质

MyPromise实力后可以执行then—>说明该函数实例后返回的对象里面有then方法，实现如下：

function MyPromise(fn) {
            let obj = {
                then: () => {
                  //…
                }
            }

            ///…

            return obj;

}

而then方法是接受一个函数参数的，我们改为如下

function MyPromise(fn) {

 //.....................
then: (fn) => {

//.....................

}

new MyPromise接受一个函数参数，这个函数是会马上执行的，我们代码改为如下

function MyPromise(fn) {
//..............
let obj = {/****/}

// 运行函数是会，传递resolve函数过去
fn(resolve)

//..............

}

当resolve函数执行的时候，就会触发未执行的then里面的函数，这时候我们就会想，then函数调用时候是不是会往MyPromise内部的某个数组里面存储这个函数，resolve时候再拿出来运行呢

我们来给MYPromise内部筛入一个数组并实现resolve函数，代码如下：

function MyPromise(fn) {

            let arr = [];

            let obj = {

                then: (fn) => {

                    //then执行的时候，给队列添加元素

                    arr.push(fn);

                    return obj;

                }

            }

            let resolve = (data) => {

                let fn = arr.shift();
                //resolve函数执行的时候，执行函数对咧里面的第一个元素
                if (fn) {

                   fn(data);

                }

            }

            fn(resolve)

            return obj;

}

实例MyPromise后，调用实例的then函数，如果有放回数据，就把数据传递给下一个【then参数】里面的【函数的参数】

实现时候，实际上就是把当前函数的执行结果传递给下一个函数对咧里面的函数并执行
代码如下：

function MyPromise(fn) {

            let arr = [];

            let obj = {

                then: (fn) => {

                    arr.push(fn);

                    return obj;

                }

            }

            let resolve = (data) => {

                let fn = arr.shift();

                if (fn) {

                    //如果then里面没有return一样会执行后面的then，只是then的参数内容为undefined

                    let result = fn(data);
//自调用，递归调用，执行函数队列的元素，并传递数据

                    resolve(result)

                    

                }



            }

            // 你的代码

            fn(resolve)

            return obj;

        }

到此完成，demo

最终代码和调用方式：

function MyPromise(fn) {

            let arr = [];

            let obj = {

                then: (fn) => {

                    arr.push(fn);

                    return obj;

                }

            }

            let resolve = (data) => {

               // console.log("arr", arr)

                let fn = arr.shift();

                if (fn) {

                    //如果then里面没有return一样会执行后面的then，只是then的参数内容为undefined

                    let result = fn(data);

                    resolve(result)

                    

                }



            }

            // 你的代码

            fn(resolve)

            return obj;

        }





        const myPromise = new MyPromise((resolve) => {

            setTimeout(() => { resolve('hellow world') }, 2000)

        })

        myPromise.then((res) => {

            console.log(res)

            return "00"

        }).then((res) => {

            console.log("res2", res)

            return "222"

        }).then((res) => {

            console.log("res3", res)

           // return "222"

        }).then((res) => {

            console.log("res4", res)

           // return "222"

        }).then((res) => {

            console.log("res5", res)

           // return "222"

        })