手写promise原理

最新推荐文章于 2024-05-23 13:27:10 发布
最新推荐文章于 2024-05-23 13:27:10 发布
阅读量421 收藏
点赞数 1
分类专栏： js 文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alice_124/article/details/113868480
版权

整体内容概述

  1. 实现Promise构造函数
  2. 实现Promise.then方法
  3. 实现Promise.catch方法
  4. 实现Promise.resolve
  5. 实现Promise.reject
  6. 实现Promise.all方法
  7. 实现Promise.race方法

1.实现Promise构造函数

在实现promise构造函数前，我们先看一下平时我们是怎样定义一个promise的

const P = new Promise((res, rej) => {
    res('ok')
})

我们可以看出promise接受一个参数，且这个参数为一个方法。据此，我们来定义我们自己的promise构造函数

;(function(window){
// 定义我们自己的promise构造函数
class MyPromise {
    constructor(extore) {
        const resolevd = ()=> {
        }
        const rejected = ()=> {
        }
        extore(resolevd, rejected);
    }
}

// 将我们自己定义的promise构造函数暴露出去
window.MyPromise = MyPromise
})(window)

promise会有三种状态 pending、resolved、rejected，此时我们需要一个变量status来记录promise的状态，并且分别需要一个变量来记录promise的值及错误信息。

;(function(window){
const PENDING = 'pendgin';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';
// 定义我们自己的promise构造函数
class MyPromise {
    // 三个变量分别存储状态、值及错误信息
    status = PENDING;
    data = undefined;
    errMessage = undefined;
    
   
    constructor(extore) {
        const resolevd = (value)=> {
            // 因为resolevd或者rejected只能执行一次，即status状态为pending的时候
           if(this.status !== PENDING) return;
           this.data = value;
           this.status = RESOLVED;
        }
        const rejected = (err)=> {
            if(this.status !== PENDING) return;
            this.errMessage = err;
            this.status = REJECTED;

        }
        extore(resolevd, rejected);
    }
}

// 将我们自己定义的promise构造函数暴露出去
window.MyPromise = MyPromise
})(window)

当我们这样使用promise的时候

const P = new Promise((res, rej) => {
    res(1)
})
P.then(data => {
    console.log(data)
})

当执行到then的时候，会传入两个回调函数resolved和rejected，并且我们在初始化promise的时候已经执行了resolved或者rejected函数，所以status会是resolved或者rejected。所以我们需要在then方法里实现resolved和rejected

;(function(window){
const PENDING = 'pendgin';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';
// 定义我们自己的promise构造函数
class MyPromise {
    // 三个变量分别存储状态、值及错误信息
    status = PENDING;
    data = undefined;
    errMessage = undefined;
    
   
    constructor(extore) {
        const resolevd = (value)=> {
            // 因为resolevd或者rejected只能执行一次，即status状态为pending的时候
           if(this.status !== PENDING) return;
           this.data = value;
           this.status = RESOLVED;
        }
        const rejected = (err)=> {
            if(this.status !== PENDING) return;
            this.errMessage = err;
            this.status = REJECTED;

        }
        extore(resolevd, rejected);
    }
    // 新增代码
    then(onResolved, onRejected){
        if (this.status === RESOLVED) {
            OnResolved(this.data);
        }
        if (this.status === REJECTED) {
            onRejected(this.errMessage);
        }

    }
}

// 将我们自己定义的promise构造函数暴露出去
window.MyPromise = MyPromise
})(window)

但是当我们这样使用promise的时候

const P = new Promise((res, rej) => {
    // 模拟后台请求
    setTimeOut(() => {
        res(1)
    }, 1000)
})
P.then(data => {
    console.log(data)
})

在promise初始化完成后，会立即执行P.then，但是由于promise的初始化的时候内部是异步操作，所以当执行到then的时候，status会是pending状态。此时我们需要使用发布订阅模式将then方法里的回调函数保存起来，等异步函数执行的时候，再去执行then里保存的方法。

;(function(window){
const PENDING = 'pendgin';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';
// 定义我们自己的promise构造函数
class MyPromise {
    // 三个变量分别存储状态、值及错误信息
    status = PENDING;
    data = undefined;
    errMessage = undefined;
    // 新增代码
    callBackList = [];
    
   
    constructor(extore) {
        const resolevd = (value)=> {
            // 因为resolevd或者rejected只能执行一次，即status状态为pending的时候
           if(this.status !== PENDING) return;
           this.data = value;
           this.status = RESOLVED;
            // 新增代码
            this.callBackList.map(({onResolved} = {}) => {
                onResolved(value)
            })
        }
        const rejected = (err)=> {
            if(this.status !== PENDING) return;
            this.errMessage = err;
            this.status = REJECTED;
            // 新增代码
            this.callBackList.map(({onRejected} = {}) => {
                onRejected(err)
            })


        }
        extore(resolevd, rejected);
    }
    then(onResolved, onRejected){
        if (this.status === RESOLVED) {
            setTimeOut(() => {
                OnResolved(this.data);
            })
           
        }
        if (this.status === REJECTED) {
            setTimeOut(() => {
                onRejected(this.errMessage);

            })

        }
        // 新增代码
        if (this.status === PENDING) {
            this.callBackList.push({
                onResolved: () => {
                  onResolved(this.data) 
                },
                onRejected: () => {
                    onRejected(this.errorMessage)
                }

            })
        }

    }
}

// 将我们自己定义的promise构造函数暴露出去
window.MyPromise = MyPromise
})(window)

至此，我们的promise构造函数基本完成了。

2.实现then方法

我们知道promise的then方法可以实现连缀写法，所以我们的then方法返回的肯定也是一个promise对象。基于此，对我们上边的代码进行修改

;(function(window){
const PENDING = 'pendgin';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';
// 定义我们自己的promise构造函数
class MyPromise {
    // 三个变量分别存储状态、值及错误信息
    status = PENDING;
    data = undefined;
    errMessage = undefined;
    callBackList = [];
    
   
    constructor(extore) {
        const resolevd = (value)=> {
            // 因为resolevd或者rejected只能执行一次，即status状态为pending的时候
           if(this.status !== PENDING) return;
           this.data = value;
           this.status = RESOLVED;
            this.callBackList.map(({onResolved} = {}) => {
                onResolved(value)
            })
        }
        const rejected = (err)=> {
            if(this.status !== PENDING) return;
            this.errMessage = err;
            this.status = REJECTED;
            this.callBackList.map(({onRejected} = {}) => {
                onRejected(err)
            })


        }
        extore(resolevd, rejected);
    }
    then(onResolved, onRejected){
        // 改动点：返回一个新的promise
        return new MyPromise((resolve, reject) => {

          if (this.status === RESOLVED) {
            setTimeOut(() => {
                OnResolved(this.data);
            })
           
            }
        if (this.status === REJECTED) {
            setTimeOut(() => {
                onRejected(this.errMessage);

            })

        }
        if (this.status === PENDING) {
            this.callBackList.push({
                onResolved: () => {
                  onResolved(this.data) 
                },
                onRejected: () => {
                    onRejected(this.errorMessage)
                }

            })
        }
       })


    }
}

// 将我们自己定义的promise构造函数暴露出去
window.MyPromise = MyPromise
})(window)

接下来看一下then方法的回调函数里可能出现的情况

const P = new Promise((res, rej) => {
    // 模拟后台请求
    setTimeOut(() => {
        res(1)
    }, 1000)
})
P.then(data => {
    console.log(data) // 第一种情况：无返回值
    // return data // 第二种情况：有返回值，但是返回值不是一个promise对象
    // return new Promise((resoleved, rejected) => { // 第三种情况，有返回值，而且返回值是个一个promise对象
    //   resolved(data)
    // })

})
.then(data => {
    console.log(data)
})

由此我们可以总结为，then方法的回调函数里无返回值或者返回值不是一个promise对象时，我们直接将回调函数里的值resolve或者reject出来即可，但是当返回值为一个promise对象时，我们需要将返回的promise resolve或者reject出来的值传给连缀写法里的then函数的回调函数。所以我们可以判断一下then方法回调函数里返回的不同内容进行不同的处理。

;(function(window){
const PENDING = 'pendgin';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';

// 新增代码：封装一个函数来统一处理我们对then回调函数返回值的处理
const handle = (cb, val, resolve, reject) => {
    const result = cb(val);
    if (result instanceof MyPromise) { // 返回的是一个promise对象
        result.then(
            value => {
                resolve(value)
            },
            reason => {
                reject(reason) 
            }
        )
    } else { // 没有返回值或者返回的不是一个promise对象
        resolve(result)
    }
}
// 定义我们自己的promise构造函数
class MyPromise {
    // 三个变量分别存储状态、值及错误信息
    status = PENDING;
    data = undefined;
    errMessage = undefined;
    callBackList = [];
    
   
    constructor(extore) {
        const resolevd = (value)=> {
            // 因为resolevd或者rejected只能执行一次，即status状态为pending的时候
           if(this.status !== PENDING) return;
           this.data = value;
           this.status = RESOLVED;
            this.callBackList.map(({onResolved} = {}) => {
                onResolved(value)
            })
        }
        const rejected = (err)=> {
            if(this.status !== PENDING) return;
            this.errMessage = err;
            this.status = REJECTED;
            this.callBackList.map(({onRejected} = {}) => {
                onRejected(err)
            })


        }
        extore(resolevd, rejected);
    }
    then(onResolved, onRejected){
        // 新增代码：为onResolved和OnRejected两个参数设置默认值
        onResolved === ‘function’? onResolved: val => val; // 当onResolved为一个方法时，onResolved即为次方法。当不是的时候，自己写一个函数，这个函数的执行结果将返回上一个promise的值。
        onRejected === 'function'? onRejected: (err) => {
            throw err; // 当onRejected不是一个方法的时候，抛出错误
        }
        return new MyPromise((resolve, reject) => {

          if (this.status === RESOLVED) {
            setTimeOut(() => {
               // 改动点
                handle(OnResolved, this.data, resolve, reject);
            })
           
            }
        if (this.status === REJECTED) {
            setTimeOut(() => {
                // 改动点
                handle(onRejected, this.errMessage, resolve, reject);

            })

        }
        if (this.status === PENDING) {
            this.callBackList.push({
                onResolved: () => {
                  // 改动点
                   handle(onResolved, this.data, resolve, reject);
                },
                onRejected: () => {
                    // 改动点
                    handle(onRejected, this.errMessage, resolve, reject)
                }

            })
        }
       })


    }
}

// 将我们自己定义的promise构造函数暴露出去
window.MyPromise = MyPromise
})(window)

然后再让我们把捕获异常加上

;(function(window){
const PENDING = 'pendgin';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';

// 封装一个函数来统一处理我们对then回调函数返回值的处理
const handle = (cb, val, resolve, reject) => {
    // 改动点：增加异常捕获
   try{
    const result = cb(val);
    if (result instanceof MyPromise) { // 返回的是一个promise对象
        result.then(
            value => {
                resolve(value)
            },
            reason => {
                reject(reason) 
            }
        )
    } else { // 没有返回值或者返回的不是一个promise对象
        resolve(result)
    }
   }catch(e){
    reject(e)
   }
}
// 定义我们自己的promise构造函数
class MyPromise {
    // 三个变量分别存储状态、值及错误信息
    status = PENDING;
    data = undefined;
    errMessage = undefined;
    callBackList = [];
    
   
    constructor(extore) {
        const resolevd = (value)=> {
            // 因为resolevd或者rejected只能执行一次，即status状态为pending的时候
           if(this.status !== PENDING) return;
           this.data = value;
           this.status = RESOLVED;
            this.callBackList.map(({onResolved} = {}) => {
                onResolved(value)
            })
        }
        const rejected = (err)=> {
            if(this.status !== PENDING) return;
            this.errMessage = err;
            this.status = REJECTED;
            this.callBackList.map(({onRejected} = {}) => {
                onRejected(err)
            })


        }
        // 改动点：添加异常捕获
        try{
            extore(resolevd, rejected);
        }catch(e) {
            rejected(e)
        }
       
    }
    then(onResolved, onRejected){
        // 为onResolved和OnRejected两个参数设置默认值
        onResolved === ‘function’? onResolved: val => val; // 当onResolved为一个方法时，onResolved即为次方法。当不是的时候，自己写一个函数，这个函数的执行结果将返回上一个promise的值。
        onRejected === 'function'? onRejected: (err) => {
            throw err; // 当onRejected不是一个方法的时候，抛出错误
        }
        return new MyPromise((resolve, reject) => {

          if (this.status === RESOLVED) {
            setTimeOut(() => {
                handle(OnResolved, this.data, resolve, reject);
            })
           
            }
        if (this.status === REJECTED) {
            setTimeOut(() => {
                handle(onRejected, this.errMessage, resolve, reject);

            })

        }
        if (this.status === PENDING) {
            this.callBackList.push({
                onResolved: () => {
                   handle(onResolved, this.data, resolve, reject);
                },
                onRejected: () => {
                    handle(onRejected, this.errMessage, resolve, reject)
                }

            })
        }
       })


    }
}

// 将我们自己定义的promise构造函数暴露出去
window.MyPromise = MyPromise
})(window)

至此，我们的then方法可以说是实现了。

3.实现catch方法

catch方法的作用其实与then方法里的第二个回调函数一样，因此我们可以在then方法的基础上实现catch方法。

catch (onRejected) {
    return this.then(undefined, onRejected)
}

是的，你没有看错，就是这么简单！

4.实现Promise.resolve

我们都知道，Promise.resolve方法接受的参数可以分为以下三种情况

  1. 不是promise
  2. 成功状态的promise
  3. 失败状态的promise

通过上边我们对then方法的封装，Promise.resolve可以这样实现

resolve(val) {
    // 返回一个promise对象，原因同then方法
    return new MyPromise((resolve, reject) => {
        if(val instanceof new Mypromise){  // val 是promise
            val.then(
                value => {resolve(value)},
                 reason => {reject(reason)}
            )
        }else { // val 不是promise
            resolve(val)
        }
    })
}

5.Promise.reject

Promsie.reject相对Promise.resolve比较简单，因为它只需要考虑reject的情况就可以了。

reject(reason){
    return new MyPromise((resolve, reject) => {
        reject(reason);
    })
}

6.Promise.all

首先，这个方法也会返回一个promise，而且这个promise的状态由所有promise产生的结果决定。

分为两种情况，第一种情况是，如果有一个promise的状态为reject，则最终的状态为reject；第二种情况是，所有的promise的状态为resolve，则最终状态为resolve，并且需要将每个promise产生的值返回出去。

all(promiseList = []) {
    const promiseLenth = promiseList.length;
    const values = new Array(promiseLenth);
    let resolvedCount = 0;
    return new MyPromise((resolve, reject) => {
        promiseList.forEach((p, index) => {
            p.then(
                value => {
                    values[index] = value; // 将单个promise状态为resolve的值保存起来
                    resolvedCount++;
                    if(resolvedCount === promiseLenth) { // 当所有promise状态都为resolved时，将存储每个promise值的数组返回。
                        resolve(values)
                    }
                },
                reason => { // 只要有一个失败，则状态为reject
                    reject(reason)
                }
            )
        })
    })
}

这样看着貌似可以了，但是还有个问题就是，我们的promise.all接受的参数（数组）里并不一定都是promise。例如 promise.all([1, 2, 3])。所以我们还需要做的一个工作是将不是promise的元素包装成一个promise（我们可以直接使用前边封装的promise.resolve()方法）。

all(promiseList = []) {
    const promiseLenth = promiseList.length;
    const values = new Array(promiseLenth);
    let resolvedCount = 0;
    return new MyPromise((resolve, reject) => {
        promiseList.forEach((p, index) => {
            MyPromise.resolve(p).then( // 可以直接使用我们前边封装的MyPromise.resolve将每个p包装成一个promise。
                value => {
                    values[index] = value; // 将单个promise状态为resolve的值保存起来
                    resolvedCount++;
                    if(resolvedCount === promiseLenth) { // 当所有promise状态都为resolved时，将存储每个promise值的数组返回。
                        resolve(values)
                    }
                },
                reason => { // 只要有一个失败，则状态为reject
                    reject(reason)
                }
            )
        })
    })
}

7. Promise.race

race方法是只要有一个promise的状态为resolve或者reject，则状态为resolve或者reject。

race(promiseList = []){
    return new MyPromise((resolve, reject) => {
        promiseList.forEach((p, index) => {
            MyPromise.resolve(p).then(
                value => {resole(value)}, // 只要有一个成功，则返回的状态为resolve
                reason => {reject(reason)} // 只要有一个失败，则返回的状态为reject
            )
        })
    })
}

 

Alice_124
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
手写Promise原理实现
yu923023913的博客
04-01 137
手写Promise源码 从构造函数开始 Promise就是一个类，在执行这个类的时候需要传递一个执行器进去，执行器会立即执行。 Promise中有三种状态 分别为：成功fulfilled失败rejected等待pending，一旦状态确定就不可更改。 //Promise 类核心逻辑实现 const PENDING = 'pending';//等待 const FULFILLED = 'filfulled';//成功 const REJECTED = 'rejected';//失败 class
手写Promise核心原理，再也不怕面试官问我Promise原理
weixin_43964148的博客
10-21 1463
整体流程的介绍 整体流程的介绍1. 定义整体结构2. 实现Promise构造函数3. 实现then方法3.实现catch方法4. 实现Promise.resolve5.实现Promise...
面试问 Promise 不会？超级详细的手写Promise原理，带你一步一步写出一个自己的 Promise
秋天，黄叶坠地，凉风有信。
03-12 1642
文章目录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 吧！ 我：What？？？
最新发布
weixin_44995391的博客
05-23 602
面试官：手写一下 Promise 吧！ 我：What？？？
手写实现一个自己的promise
大香蕉的博客
12-09 597
实现内容： 1、then方法：当resolve时会触发then方法 2、catch方法：当reject时会触发catch方法 3、promise.resolve()：直接生成一个成功状态的promise对象 4、promise.reject()：直接生成一个失败状态的promise对象 5、Promise.all()：参数为promise对象数组，等待所有状态都不为pending 6、Promise...
JS手写Promise源码
12-19
1、深入理解Promise的工作原理：手写Promise可以帮助我们更深入地理解Promise的工作原理和内部机制。通过手动实现Promise的核心功能，如异步调用、状态管理和回调处理，我们可以更好地理解Promise在背后是如何工作的...
js代码-手写promise.all
07-16
// 这里将实现手写Promise.all的逻辑 }); } ``` 接下来，我们需要跟踪Promise的状态。我们可以创建一个计数器来记录已解析的Promise数量，以及一个存储结果的数组： ```javascript let resolvedCount = 0; let ...
手写promise，实现
02-13
promise原理
promise实现原理
11-13
手写Promise时，我们需要创建一个构造函数，它接受一个执行器函数（executor）作为参数。执行器函数会在Promise实例创建时立即执行，用于启动异步操作。构造函数内部通常会包含一个状态变量和两个结果变量，分别用来...
js代码-手写Promise
07-15
手写Promise是一项挑战性的任务，它可以帮助我们深入理解Promise的工作原理以及其背后的机制。本文将围绕“js代码-手写Promise”这一主题，详细解析Promise的核心概念和实现过程。 Promise有三种状态：pending...
手写Promise 理解promise底层原理
Niall_Tonshall的博客
01-18 2393
本文参考了此博客，在网上浏览了很多关于Promise的相关资料，promise可以说是JavaScript的重难点了，其中，很是感谢阮一峰老师的博客讲解以及MDN上的文档教程 如对Promise不太熟悉的同学，可以先浏览Promise工作原理分析，如有不同意见，欢迎讨论，一起进步。 Promise基本流程 function doSomething(){ var p1 = new Promise(function (resolve, reject) { setTimeout(()=.
手写promise原理的基本实现
qq_45300422的博客
09-28 99
promise原理创建微任务
手写Promise
XunLin233的博客
05-30 1919
在index.html中编写如下代码resolve("执行成功");})})创建一个promise.js文件在index.html中引入1. Promise能够通过new的方式调用，所以Promise是构造函数的形式。2. 构造Promise实例的时候传过去了一个函数，使用executor（执行器函数接收这个形参）。3. Promise实例能够调用then方法，所以在构造函数的原型上要添加then方法。4. then方法接收两个函数。// Promsie构造函数// 添加then方法。
300秒带你手写一个promise
小陈的博客
05-18 5982
前言 为什么要写这一篇文章？ 加深对promise的理解，以及再实际工作中的灵活运用。 知其然，知其所以然。 面试需要。（重点！！！） 1:声明promise 首先我们先来聊聊promise的几个特性： 一个promise有三种状态：pengding,fulfilled，rejected. promise状态一旦被改变，就不允许被改变了。 new Promise构造函数接受一个函数参数，这个函数有两个参数分别为resole和reject函数。 其实代码很好写，我们就来检验以下resolve的参数是否
手写Promise方法（直击Promise A+规范）
小王的技术库
02-22 794
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
前端 面试----手写promise（promise自定义封装）
WXY博客
06-09 903
---------简单来说，函数是为了解决异步回调时的一些问题，更准确来说是为了解决我们在开发中，经常会面临的“回调地狱”所给开发者带来的困扰。promise可以被理解成一个方案，来有助于我们快速规避这些麻烦，从而提高我们的开发效率。----------我们知道一个Promise函数的状态必然处于以下几种状态中的一个：待定（pending）已兑现（fulfilled）已拒绝（rejected）
前端必须学会的经典面试题场景之一 —— 手写Promise
weixin_46709512的博客
06-06 2389
手写Promise的正确姿势~ 前端面试涨薪必学，从0实现Promise
手把手一行一行代码教你“手写Promise“，完美通过 Promises/A+ 官方872个测试用例
圆圆的 JavaScript 博客
12-20 1557
保姆级教程，看完还不懂的私聊我亲自教！
手写promise的方法
09-01
另外，手写Promise的方法主要是为了更好地理解Promise的工作原理和实现方式，实际开发中通常会直接使用JavaScript中内置的Promise对象。<span class="em">1</span><span class="em">2</span><span class="em">3 ####...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值