Promise实现原理

于 2023-12-14 14:51:09 发布
阅读量135 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NM86876788/article/details/134975519
版权

一、基础版 Promise

观察 Promise 表象

  1. Promise 需要使用 new 关键字实例化。
  2. Promise 首个参数是回调函数，且该回调函数是立即执行的。
  3. 执行器（回调函数）有两个参数，分别是 resolve 和 reject，在执行器内部可以通过括号调用。
  4. Promise 有三种状态，状态间存在规则且不可逆。
  5. resolve 和 reject 调用时改变 Promise 的状态。
  6. Promise then 方法 存在两个函数类型的参数，一个是成功时调用，一个是失败时调用。
  7. then 方法第一个回调函数参数是成功返回的结果值，该结果值为 resolve 调用时传入的值。第二个回调函数参数是失败返回的错误对象。

通过观察 Promise 表象得出的：需实现功能（和表象一一对应）

  1. Promise 是一个类。
  2. 通过new 实例化一个 Promise 类时，需要传递一个执行器（回调函数）进去，执行器会立即执行。
  3. 执行器有两个参数，参数类型皆是函数。
  4. Promise 有三个状态：pending、fulfilled、rejected，pending->fulfilled/pending->rejected，一旦状态确定就不可更改。
  5. 执行器参数函数调用时改变状态，resolve 和 reject 用来更改状态。
  6. 实现 then 方法，接受两个参数，参数类型为函数，Promise 状态更改为 fulfilled 时调用第一个参数，状态更改为 rejected 时调用第二个参数。
  7. resolve 接受一个值，在then 方法第一个回调函数执行时作为默认参数传入。reject 方法接收一个异常对象，在 then 方法第二个回调函数执行时作为默认参数传入。

Promise 基础实现

上述条件完成后我们基本可以实现一个基础 Promise 类。

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class PromiseM {
    status = PENDING;    // promise 状态
    value = undefined;   // 成功之后的值
    error = undefined；  // 失败后的原因
    constructor(fn) {
        return fn(this.resolve, this.reject);
    }
    resolve = (value) => {
        // 如果状态不是等待 组织程序向下执行
        if (this.status !== PENDING) return
        // 将状态更改为成功
        this.status = FULFILLED;
        // 保存成功后的值
        this.value = value;
    };
    reject = (error) => {
        // 如果状态不是等待 组织程序向下执行
        if (this.status !== PENDING) return
        // 将状态更改为失败
        this.status = REJECTED;
        // 保存失败后的原因
        this.error = error;
    };
    then = (successCallBack, failCallBack?) => {
        if (this.status === FULFILLED) {
            return successCallBack(this.value);
        }
        if (this.status === REJECTED) {
            return failCallBack(this.error);
        }
        throw false;
    }
}

我们可以如下调用实验是否完善：

const promiseM = new PromiseM((resolve, reject) => {
    resolve(1);
    // reject('fail')
}).then((res) => {
    console.log(res);
}, error => {
    console.log(error)
})

二、标准版 Promise

下面我们先阐述一些需要特殊补充的功能点，最后我们再把每一个功能点一一放出，最终再放上最终版代码。

1. Promise 异步处理

const promiseM = new PromiseM((resolve, reject) => {
    setTimeout(() => {
        resolve('成功');
    }, 2000)
}).then((res) => {
    console.log(res);
}, error => {
    console.log(error);
})

2. 一个 Promise 实例多次调用 then 方法（同步、异步都要考虑）

const promiseM = new PromiseM((resolve, reject) = {
    setTimeout(() => {
        resolve('success')
    }, 2000)
})

promiseM.then(res => {
    console.log(res);
}, error => {
    console.log(error)
})

promiseM.then(res => {
    console.log(res);
}, error => {
    console.log(error)
})

3. Promise then 链式调用、then 方法返回值

  • then 方法可以被链式调用。
  • then 方法会返回一个全新的 Promise 对象。
  • 后面 then 方法回调函数拿到的值是上一个 then 方法的返回值。
  • then 方法可以返回一个值或一个 Promise 对象。
promiseM.then(res => {
    return 1
}).then(res => {
    console.log(res)
})

4. 校验之避免循环调用

const m = promiseM.then(res => {
    return m
})

5. 错误处理

  • 执行器函数中出现错误时，触发 reject 并捕获异常
  • then 回调函数调用时出现错误，触发下一个 then 的 reject
  • then 回调函数的 REJECT status 的处理，以使 reject 状态下也可以达到链式调用，向下传递至下个 then
// 执行器 抛出异常
const promiseM = new PromiseM((resolve, reject) => {
    throw new Error('executor error')
})

// then 抛出异常
const promiseM = new PromiseM((resolve, reject) => {
    resolve(1)
})
promiseM.then(() => {
    throw new Error('executor error')
}).then(() => {}, (error) => {
    console.log(error.message)
})

// reject 链式调用
const promiseM = new PromiseM((resolve, reject) => {
    reject('失败')
})
promiseM.then(value => {
    console.log(value)
}, error => {
    console.log(error)
    return 10000
}).then(value => {
    console.log(value)
})

6. 处理异步情况

console.log(1)
const promiseM = new PromiseM((resolve, reject) => {
    setTimmeout(() => {
        resolve('resolve')
    }, 1000)
})

console.log(2)

promiseM.then(res => {
    console.log(4)
    return 1
}).then(res => {
    console.log(res)
})
console.log(3)
Code 2-1：Promise 异步处理
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class PromiseM {
    status = PENDING;    // promise 状态
    value = undefined;   // 成功之后的值
    error = undefined;   // 失败后的原因
    successCallBack = undefined;
    failCallBack = undefined;
    constructor(fn) {
        return fn(this.resolve, this.reject);
    }
    rosolve = (value) => {
        // 如果状态不是等待 组织程序向下执行
        if (this.status !== PENDING) return
        // 将状态更改为成功
        this.status = FULFILLED;
        // 保存成功后的值
        this.value = value;
        // 判断成功回调是否存在，如果存在则调用
        this.successCallBack && this.successCallBack(this.value)
    };
    reject = (error) => {
        // 如果状态不是等待 组织程序向下执行
        if (this.status !== PENDING) return
        // 将状态更改为失败
        this.status = REJECTED;
        // 保存失败后的原因
        this.error = error;
        // 判断失败回调是否存在，如果存在则调用
        this.failCallBack && this.failCallBack(this.value)
    };
    then = (successCallBack, failCallBack?) => {
        if(this.status === FULFILLED) {
            return successCallBack(this.value);
        }
        if(this.status === REJECTED) {
            return failCallBack(this.error)
        }
        this.successCallBack = successCallBack
        this.failCallBack = failCallBack
    }
}
Code 2-2：一个 Promise 实例多次调用 then 方法
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class PromiseM {
    status = PENDING;    // promise 状态
    value = undefined;   // 成功之后的值
    error = undefined;   // 失败后的原因
    successCallBack = [];
    failCallBack = [];
    constructor(fn) {
        return fn(this.resolve, this.reject);
    }
    resolve = (value) => {
        // 如果状态是不是等待 组织程序向下执行
        if(this.status !== PENDING) return
        // 将状态更改为成功
        this.status = FULFILLED;
        // 保存成功后的值
        this.value = value;
        // 判断成功回调是否存在，如果存在则调用，通过循环依次调用
        while(this.successCallBack.length > 0) {
            this.successCallBack.shift()(this.value)
        }
    };
    reject = (error) => {
        // 如果状态不是等待 组织程序向下执行
        if(this.status !== PENDING) return
        // 将状态更改为失败
        this.status = REJECTED;
        // 保存失败后的原因
        this.error = error;
        // 判断失败回调是否存在，如果存在则调用，通过循环依次调用
        while(this.failCallBack.length > 0) {
            this.failCallBack.shift()(this.value)
        }
    };
    then = (successCallBack, failCallBack?) => {
        if(this.status === FULFILLED) {
            return successCallBack(this.value)
        }
        if(this.status === REJECTED) {
            return failCallBack(this.error)
        }
        this.successCallBack.push(successCallBack)
        this.failCallBack.push(failCallBack)
    }
}
Code 2-3： Promise then 链式调用、then 方法返回值
then = (successCallback, failCallBack?) => {
    console.log('then', this.status);

    return new PromiseM((resolve, reject) => {
        if(this.status === FULFILLED) {
            console.log(this.value, 'success');
            return resolvePromise(successCallBack(this.value), resolve, reject);
        }
        if(this.status === REJECTED) {
            return failCallBack(this.error)
        }
        this.successCallBack.push(successCallBack)
        this.failCallBack(failCallBack)
    })
}

function resolvePromise(x, resolve, reject) {
    if(x instanceod PromiseM) {
        x.then(resolve, reject)
    } else {
         resolve(x)   
    }
}
Code 2-4：校验之避免循环调用
then = (successCallBack, failCallBack?) => {
    const promise2 = new PromiseM((resolve, reject) => {
        if(this.status === FULFILLED) {
            return setTimeout(() => {
                resolvePromise(promise2, successCallBack(this.value), resolve, reject);
            }, 0)
        }
        if(this.status === REJECTED) {
            return failCallBack(this.error)
        }
        this.successCallBack.push(successCallBack)
        this.failCallBack.push(failCallBack)
    })
    return promise2
};
function resolvePromise(promise2, x, resolve, reject) {
    if(promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<promise>'))
    }
    if(x instanceof PromiseM) {
        x.then(resolve, reject)
    } else {
        resolve(x)
    }
}
Code 2-5：错误处理
constructor(fn) {
    try {
        fn(this.resolve, this.reject);
    } catch (error) {
        this.reject(error)
    }
}

then = (successCallBack, failCallBack?) => {
    const promise2 = new PromiseM((resolve, reject) => {
        if(this.status === FULFILLED) {
            return setTimeout(() => {
                try {
                    resolvePromise(promise2, successCallBack(this.value), resolve, reject);
                } catch (error) {
                    reject(error)
                }
            }, 0)
        }
        if(this.status === REJECTED) {
            return failCallBack(this.error)
        }
        this.successCallBack.push(successCallBack)
        this.failCallBack.push(failCallBack)
    })
    return promise2
}
Code 2-6：处理异步情况 （需要重点理解）
resolve = (value) => {
    // 如果状态不是等待 组织程序向下执行
    if(this.status !== PENDING) return
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功后的值
    this.value = value;
    console.log('IN RESOLVE');

    // 判断成功回调是否存在，如果存在则调用
    while (this.successCallback.length > 0) {
        this.successCallBack.shift()()
    }
};

reject = (error) => {
    // 如果状态不是等待 组织向下执行
    if(this.status !== PENDING) return
    // 将状态更改为失败
    this.status = REJECTED;
    // 判断失败回调是否存在，如果存在则调用
    while (this.failCallBack.length > 0) {
        this.failCallBack.shift()()
    }
};

then = (successCallBack, failCallBack?) => {
    const promise2 = new PromiseM((resolve, reject) => {
        if(this.status === FULFILLED) {
            return setTimeout(() => {
                try {
                    resolvePromise(promise2, successCallBack(this.value), resolve, reject);
                } catch (error) {
                    reject(error)
                }
            }, 0)
        }
        if(this.status === REJECTED) {
            return setTimeout(() => {
                try {
                    resolvePromise(promise2, failCallBack(this.error), resolve, reject);
                } catch (error) {
                    reject(error)
                }
            }, 0)
        }
        this.successCallBack.push(() => {
            setTimeout(() => {
                try {
                    resolvePromise(promise2, successCallBack(this.value), resolve, reject);
                } catch (error) {
                    reject(error)
                }
            }, 0)
        })
        this.failCallBack.push(() => {
            setTimeout(() => {
                try {
                    resolvePromise(promise2, failCallBack(this.error), resolve, reject);
                } catch (error) {
                    reject(error)
                }
            }, 0)
        })
    })
    return promise2
}

三、核心版 Promise

我们还需要处理一些细节，以及 Promise.all 等功能方法。

1. then 方法参数问题

  • then 方法的 resolve/reject 两个参数都是可选参数
  • 没有回调函数的 then 方法 会将 Promise 的状态依次向后传递，直到传递至存在回调函数的 then 方法
  • then 若没有传递参数，则自动补充一个回调函数：获取 resolve 返回值并直接 return，以达到状态传递的效果
// 示例 1
const promiseM = new PromiseM((resolve, reject) => {
    resolve('resolve')
})
promiseM.then().then().then(res => {
    console.log(res)
})
// resolve

// 示例 2
const promiseM = new PromiseM((resolve, reject) => {
    reject('reject')
})
promiseM.then().then().then(res => {
    console.log(res)
}, error => {
    console.log(error)
})

我们需要实现如下面的功能：

promiseM.then().then().then(res => {
    console.log(res)
})
// ↓↓↓↓↓↓↓↓↓ 自动补充如下
promiseM.then(value => value).then(value => value).then(res => {
    console.log(res)
})

2. Promise.all 方法的实现

  • 按照异步代码调用的顺序得到异步代码执行的结果，调用的顺序一定是结果的顺序
  • 数组参数里接收任何类型：Promise 或对象等
  • 返回值是一个 Promise 对象，且可以链式调用 then 方法
  • all 方法中所有的 Promise 对象的状态都是成功时 all 方法最后的状态也是成功的，若存在一个失败，则其状态也会是失败的
  • all 方法是一个静态方法，为解决异步并发问题
const func_1 = () => {
    return new PromiseM((resolve, reject) => {
        setTimeout(() => {
            resolve('func_1')
        }, 2000)
    })
}
const func_2 = () => {
    return new PromiseM((resolve, reject) => {
        resolve('func_2')
    })
}
PromiseM.call(['a','b'func_1(),func_2(),'c']).then(function(result){
    // result -> ['a','b','func_1','func_2','c']
})

3. Promise.resolve 方法的实现

  • 将给定的值转换为 Promise 对象，如果给定值为 Promise 类型，则原封不动传递回去
  • 返回值为一个 Promise 对象，该对象会包裹通过参数传递进去的值
  • resolve 方法是一个静态方法
const func_1 = () => {
    return new PromiseM((resolve, reject) => {
        resolve('func_1')
    })
}
PromiseM.resolve(10).then(value => console.log(value))
PromiseM.resolve(func_1()).then(value => console.log(value))

// 10
// func_1

4. finally 方法的实现

  • 无论当前 Promise 状态是成功还是失败，finally 里的回调函数总会被执行
  • finally 也能够通过链式调用 then 的方式获取当前 Promise 最终返回的结果
  • 不是静态方法
  • finally 的回调函数里也可以 return 一个值，以达到链式调用目的，且调用顺序需注意
const promise_1 = new PromiseM((resolve, reject) => {
    setTimeout(() => {
        resolve('promise_1')
    }, 2000)
})

console.log('-------------');
const promise_2 = new PromiseM((resolve, reject) => {
    reject('失败')
})

promise_2.finally(() => {
    console.log('finally_2')
    return promise_1
}).then(value => {
    console.log(value)
}, error => {
    console.log(error)
})

// finally_2
// 失败

5. catch 方式的实现

  • 用于处理当前 Promise 对象最终状态为失败时的情况
  • 如果不传递失败回调，那么当 Promise 失败时，触发 catch 方法中的回调函数
  • 可在 catch 后链式调用其他方法
const promise = new PromiseM((resolve, reject) => {
    reject('失败')
})

promise.then(value => console.log(value))
    .catch(error => console.log(error))
Code 3-1：then 方法参数问题
then = （successCallBack?, failCallBack?） => {
    successCallBack = successCallBack ? successCallBack : value => value
    failCallBack = failCallBack ? failCallBack : error => { throw error }
    ......
}
Code 3-2：Promise.all 方法的实现
static all(array) {
    let result = []
    let i = 0
    retrun new PromiseM((resolve, reject) => {
        function addData(key, value) {
            result[key] = value
            i++
            if(i === array.length) {
                resolve(result)
            }
        }
        array.forEach((current, index) => {
            if(current instanceof PromiseM) {
                current.then(value => addData(index, value), error => reject(error))
            } else {
                addData(index, current)
            }
        })
    })
}
Code 3-3：Promise.resolve 方法的实现
static resolve(value) {
    if(value instanceof PromiseM) return value;
    return new PromiseM((resolve) => resolve(value));
}
Code 3-4：finally 方法的实现
finally = (callback) => {
    return this.then(value => {
        return PromiseM.resolve(callback()).then(() => value)
    }, error => {
        return PromiseM.resolve(callback()).then(() => { throw error })
    })
}
Code 3-5：catch 方法的实现
catch(failCallBack) {
    return this.then(undefined, failCallBack)
}

四、完整版 Promise

整合代码

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class PromiseM {
    status = PENDING;    // promise 状态
    value = undefined;   // 成功之后的值
    error = undefined;   // 失败后的原因
    successCallBack = [];
    failCallBack = [];
    constructor(fn) {
        try {
            fn(this.resolve, this.reject);
        } catch (error) {
            this.reject(error);
        }
    }
    resolve = (value) => {
        // 如果状态不是等待 组织程序向下执行
        if(this.status !== PENDING) return;
        // 将状态更改为成功
        this.status = FULFILLED;
        // 保存成功后的值
        this.value = value
        // 判断成功回调是否存在，如果存在则调用
        while(this.successCallBack.length > 0) {
            this.successCallBack.shift()();
        }
    }
    reject = (error) => {
         // 如果状态不是等待 组织程序向下执行
        if(this.status !== PENDING) return;
        // 将状态更改为失败
        this.status = REJECTED;
        // 保存失败后的原因
        this.error = error
        // 判断失败回调是否存在，如果存在则调用
        while(this.failCallBack.length > 0) {
            this.failCallBack.shift()();
        }
    }
    then = (successCallBack?, failCallBack?) => {
        successCallBack = successCallBack ? successCallBack : (value) => value;
        failCallBack = failCallBack
            ? failCallBack
            : (error) => {
                throw error;
            }
        const promise2 = new PromiseM((resolve, reject) => {
            if(this.status === FULFILLED) {
                retrun setTimeout(() => {
                    try {
                        resolvePromise(
                            promise2,
                            successCallBack(this.value),
                            resolve,
                            reject
                        );
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            }
            if(this.status === REJECTED) {
                return setTimeout(() => {
                    try {
                        resolvePromise(promise2, failCallBack(this.error), resolve, reject)
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            }
            this.successCallBack.push(() => {
                setTimeout(() => {
                    try {
                        resolvePromise(
                            promise2,
                            successCallBack(this.value),
                            resolve,
                            reject
                        )
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            })
            this.failCallBack.push(() => {
                setTimeout(() => {
                    try {
                        resolvePromise(promise2, failCallBack(this.error), resolve, reject)
                    } catch (error) {
                        reject(error)
                    }
                }, 0)
            })
        })
        return promise2
    }
    finally = (callback) => {
        return this.then(value => {
            return PromiseM.resolve(callback()).then(() => value)
        }, error => {
            return PromiseM.resolve(callback()).then(() => { throw error })
        })
    }
    catch(failCallBack) {
        return this.then(undefined, failCallBack)
    }
    static all(array) {
        let result = [];
        let i = 0;
        return new PromiseM((resolve, reject) => {
            function addData(key, value) {
                result[key] = value;
                i++;
                if(i === array.length) {
                    resolve(result)
                }
            }
            array.forEach((current, index) => {
                if(current instanceof PromiseM) {
                    current.then(
                        (value) => addData(index, value),
                        (error) => reject(error)
                    )
                } else {
                    addData(index, current)
                }
            })
        })
    
    }
    static resolve(value) {
        if(value instanceof PromiseM) return value;
        return new PromiseM((resolve) => resolve(value));
    }
}

function resolvePromise(promise2, x, resolve, reject) {
    if(promise2 === x) {
        return reject(
            new TypeError('Chaining cycle detected for promise #<Promise>')
        )
    }
    if(x instanceof PromiseM) {
        x.then(resolve, reject)
    } else {
        resolve(x)
    }
}

NM86876788
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Promise 实现原理
weixin_43299180的博客
02-21 2万+
文章目录一、Promise 介绍二、promise 源码实现 一、Promise 介绍 定义 Promise 是异步编程的一种解决方法，比传统的回调函数和事件更合理；它是由社区提出和实现经由 ES6 将其写进语言标准，并在原生提供了 Promise 对象； Promise 可以理解是一个容器，里面保存着某个将来才会结束的事件（异步操作）的结果；从语法上说，Promise 是一个对象通过它可以获取异步操作的消息；Promise 提供了统一的 API ，各种异步操作都可以用同样的方法进行处理。 特点 Pr
5K字 由浅入深聊聊Promise实现原理
Web_boom的博客
03-10 309
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
面试问 Promise 不会？超级详细的手写Promise原理，带你一步一步写出一个自己的 Promise
秋天，黄叶坠地，凉风有信。
03-12 1494
文章目录Promise 原理 及其 实现一、实现resolve和reject1、resolve与reject2. 状态不可变3. throw二、实现 then1. 实现then2. 定时器情况3. 链式调用4. 微任务三、最后总结 Promise 原理 及其 实现 首先要实现 Promise 就要让我们了解它具体功能 let p1 = new Promise((resolve)=>{ resolve(2) }) console.log(p1); let p2 = new Promise((
Promise原理详解及实现方式
19年的墨先生的博客
09-11 8282
在异步编程中，许多操作都会放在回调函数（callback）中，有时候需要拿到上一个异步操作的返回值再做第二次请求 比如： asyncOperation(data => { // 处理 `data` anotherAsync(data2 => { // 处理 `data2` yetAnotherAsync(() => { // 完成 }) }) }) 上面代码中，每增加一个异步请求，就会多添加一层回调函数的嵌套，过多的回调
promise实现原理
最新发布
11-13
手写 Promise 实现原理
Javascript-Promise原理
03-06
Promise对象必须实现then方法，then是promise规范的核心，而且then方法也必须返回一个Promise对象，同一个Promise对象可以注册多个then方法，并且回调的执行顺序跟它们的注册顺序一致； then方法接受两个回调函数，...
Promise Async+await实现原理及案例分析
04-03
Promise Async+await实现原理及案例分析
JavaScript Promise 原理
05-15
Promise 原理，包括then、catch、all、race、reject、finally、resolve方法。200行代码实现自己的Promise
Promise原理介绍和实现.docx
05-06
promise原理 Promise原理介绍和实现.docx Promise原理介绍和实现.docx Promise原理介绍和实现.docx
Promise原理及实现
橘猫吃不胖的博客
08-09 2166
Promise原理及实现 1 Promise核心逻辑实现 2 加入异步逻辑 3 then方法添加多次调用逻辑 4 链式调用then方法 5 Promise错误捕获 6 then方法参数设置为可选 7 实现Promise.all 8 实现Promise.resolve 9 实现Promise.race 10 实现finally方法 11 实现catch方法 12 全部代码展示...
promise实现原理解析
weixin_53156345的博客
05-16 380
Promise是一个类，可以翻译为承诺、期约当通过new创建Promise实例时，需要传入一个回调函数，我们称之为executor这个回调函数会被立刻执行，并传入两个回调参数resolvereject当调用resolve回调函数时，会执行 Promise 对象的then方法传入的回调当调用reject回调函数时，会执行 Promise 对象的catch方法传入的回调Promisepending：待定状态，执行了 executor 后，处于该状态fulfilled：兑现状态，调用resolve()
promise实现原理解析（设计思想）
前端361
08-06 4175
promise作为es6的基本api，大家都用的很熟悉了。不过谈到promise的实现原理，可能很多人还很陌生，这里对promise的内部实现原理做下解析。 研究一种api或一个框架，最好的方法是要知道这背后能够实现的价值和自我提升，不能为了研究而研究。网上有很多博客或者专栏也在介绍，那么我们为什么要研究promise的内部实现原理呢，这对于编程或者业务又有怎样的帮助呢。 研究promise原...
图解 Promise 实现原理（一）—— 基础实现
vivo互联网技术
03-30 449
本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ 作者：孔垂亮 很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。 本系列文章有如下几...
promise得实现原理
qq_38935512的博客
02-15 1031
1.Promise本身就是一个构造函数，用来初始化promise实例 2.传入一个执行器，内部注册两个方法resolve,reject，最后通过执行器来执行这两个方法 3.promise 内部有3个状态 等待状态pedding，成功状态resolved,失败状态rejected 4.resolve和reject两个方法就是用来改变status状态得 5.后面封装then方法得时候,就是根据当前得状态来判断执行对应方法，第一个方法固定式成功回调，第二个就是失败回调 function Promise(exe.
promise 的实现原理
CrazyNatural的博客
09-10 146
但是规范制作不希望使用宏任务，应该使用微任务 queueMicrotask。问题：失败和成功会同时执行 优化then的链式结构。优化1 支持then的多次调用。
Promise的实现原理
LuckXinXin的博客
10-12 535
大致思路： 1、Promise的构造函数，只有一个函数参数resolver(resolve,reject)，而函数参数resolver的两个参数都是函数参数，第一个参数resolve表示处理成功执行的函数，reject表示失败执行的函数 在构造函数中的属性有state(保存当前promise的状态)；value（保存resolve或发生reject的错误原因）；queue（Array，同一个pro...
Promise的实现原理（一）
smz8023的博客
09-14 717
Promise的实现原理（一） 1.先说一下用法，根据用法来一步步实现； 1.1 简单使用 // 传如一个函数，函数里有两个参数，resolve，reject new Promise((resolve,reject)=>{ // 成功就调用 resolve() }) 1.1.1 来实现我们自己的Mypromise class Mypromise { // executor 执行者，也就是调用方传过来的函数，他是立即执行的 constructor(executor){ // exe
promise实现原理的源码分析
初漾的博客
10-15 1311
转自:https://segmentfault.com/a/1190000009478377#articleHeader0

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值