模拟Promise实现

最新推荐文章于 2024-04-16 08:53:53 发布
最新推荐文章于 2024-04-16 08:53:53 发布
阅读量552 收藏
点赞数 1
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40285497/article/details/108200056
版权
1. promise核心
// 封装promise
// 1. Promise 就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行去会立即执行
// 2. Promise 中有三个状态，分别为：成功(fulfilled)、失败(rejected)、等待(pending)；一旦状态确定就不可更改
// 3. resolve和reject函数用来更改状态
// 4. then 方法内部做的事情就是判断状态，根据状态调用不同的回调函数(成功失败)
// 5. then 成功回调有一个参数，表示成功之后的值，then失败回调有一个参数，表示失败的原因

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

class MyPromise{
    // 当前执行状态
    status = PENDING
    // 成功值
    value = undefined
    // 失败原因
    reason = undefined

    // new Promise是立即执行
    constructor(executor){
        executor(this.resolve,this.reject)
    }

    resolve = value => {
        // 如果状态不在等待 阻止程序向下执行
        if(this.status !== PENDING)return
        // 状态变更为成功
        this.status  = FULFILLED
        // 保存成功之后的值
        this.value = value
    }

    reject = reason => {
        if(this.status !== PENDING)return
        this.status = REJECTED
        this.reason = reason
    }

    // then中的回调
    then(successCallback, failCallback){
        if(this.status === FULFILLED){
            successCallback(this.value)
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }
    }
}

// node提供的导出方式
module.exports = MyPromise

使用


const MyPromise = require('./MyPromise')

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})
promise加入异步逻辑

前面的promise没有加异步的情况。增加异步就是在then中判断，如果状态没有变更，保存成功回调和失败回调；在resolve或reject时判断是否有需要执行的成功或者失败回调，有就执行

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

class MyPromise{
    // 当前执行状态
    status = PENDING
    // 成功值
    value = undefined
    // 失败原因
    reason = undefined
    // 成功回调
    successCallback = undefined
    // 失败回调
    failCallback = undefined

    // new Promise是立即执行
    constructor(executor){
        executor(this.resolve,this.reject)
    }

    resolve = value => {
        // 如果状态不在等待 阻止程序向下执行
        if(this.status !== PENDING)return
        // 状态变更为成功
        this.status  = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判断成功回调是否存在 如果存在 调用
        this.successCallback && this.successCallback(this.value)
    }

    reject = reason => {
        if(this.status !== PENDING)return
        this.status = REJECTED
        this.reason = reason
    }

    // then中的回调
    then(successCallback, failCallback){
        if(this.status === FULFILLED){
            successCallback(this.value)
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 将成功回调和失败回调存储起来
            this.successCallback = successCallback
            this.failCallback = failCallback
        }
    }
}

module.exports = MyPromise
then方法多次调用添加多个处理函数
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise{
    // 当前执行状态
    status = PENDING
    // 成功值
    value = undefined
    // 失败原因
    reason = undefined
    // 成功回调
    successCallback = []
    // 失败回调
    failCallback = []

    // new Promise是立即执行
    constructor(executor){
        executor(this.resolve,this.reject)
    }

    resolve = value => {
        // 如果状态不在等待 阻止程序向下执行
        if(this.status !== PENDING)return
        // 状态变更为成功
        this.status  = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判断成功回调是否存在 如果存在 调用
        while(this.successCallback.length){
            this.successCallback.shift()(this.value)
        }
    }

    reject = reason => {
        if(this.status !== PENDING)return
        this.status = REJECTED
        this.reason = reason
        while(this.failCallback.length){
            this.failCallback.shift()(this.reason)
        }
    }

    // then中的回调
    then(successCallback, failCallback){
        if(this.status === FULFILLED){
            successCallback(this.value)
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 将成功回调和失败回调存储起来
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    }
}

module.exports = MyPromise




let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})
promise.then(value => {
    console.log(value);
})
promise.then(value => {
    console.log(value);
})
then方法的链式调用

链式调用1

then(successCallback, failCallback){
    // 返回一个新的promise，新的promise状态原始都是pending
    let promise2 = new MyPromise((resolve, reject) => {
        // 这里面的this是上一个promise的this
        if(this.status === FULFILLED){
            let x = successCallback(this.value);
            resolve(x) // 这里执行新的promise里面的resolve 改为this.resolve就不行
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 将成功回调和失败回调存储起来
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    })
    return promise2
}

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})
promise.then(value => {
    console.log(value);
    return 100;
}).then(value => {
    console.log(value);
})

链式调用2

function resolvePromise(x, resolve, reject) {
    // 判断 x 的值是普通值还是 primise 对象
    // 如果是普通值 直接调用 resolve 
    // 如果是 promise 对象 查看 promise 对象返回的结果
    // 再根据 promise 对象的返回结果 决定调用 resolve 还是 调用 reject (这两都是外部promise的方法)

    if (x instanceof MyPromise) {
        // promise 对象
        x.then(resolve, reject)
    } else {
        // 普通值
        resolve(x)
    }
}
then(successCallback, failCallback){
    let This = this;
    let promise2 = new MyPromise((resolve, reject) => {
        if(this.status === FULFILLED){
            let x = successCallback(this.value);
            resolvePromise(x,resolve,reject);
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 将成功回调和失败回调存储起来
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    })
    return promise2
}



const MyPromise = require('./MyPromise')

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})

function other(){
    return new MyPromise((resolve, reject) => {
        resolve('other')
    })
}

promise.then(value => {
    console.log(value);
    return other()
}).then(res => {
    console.log(res);
})
then链式调用识别对象自己返回自己
let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})


let p1 = promise.then(value => {
    console.log(value);
    return p1
})
p1.then(res => {
    console.log(res);
},err => {
    console.log(err);
})






function resolvePromise(promise2,x, resolve, reject) {
    // 判断 x 的值是普通值还是 primise 对象
    // 如果是普通值 直接调用 resolve 
    // 如果是 promise 对象 查看 promise 对象返回的结果
    // 再根据 promise 对象的返回结果 决定调用 resolve 还是 调用 reject

    if(promise2 === x){
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (x instanceof MyPromise) {
        // promise 对象
        x.then(resolve, reject)
    } else {
        // 普通值
        resolve(x)
    }
}

then(successCallback, failCallback){
    let This = this;
    let promise2 = new MyPromise((resolve, reject) => {
        if(this.status === FULFILLED){
            setTimeout(()=>{
                let x = successCallback(this.value);
                resolvePromise(promise2,x,resolve,reject);
            },0)
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 将成功回调和失败回调存储起来
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    })
    return promise2
}
捕获错误

执行器里面的错误，将错误信息存入错误原因，在then的时候第二个回调打印这个错误

// new Promise是立即执行
constructor(executor) {
    try{
        executor(this.resolve, this.reject)
    }catch(e){
        this.reject(e)
    }
}


let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})

promise.then(res => {
    console.log(res);
},err => {
    console.log(err);
})

then里面的错误，在后面的then里面输出

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})

promise.then(res => {
    console.log(res);
    throw new Error('then error')
}).then(res => {
    console.log(res);
},err => {
    console.log(err);
})



then(successCallback, failCallback){
    let This = this;
    let promise2 = new MyPromise((resolve, reject) => {
        if(this.status === FULFILLED){
            setTimeout(()=>{
                try{
                    let x = successCallback(this.value);
                    resolvePromise(promise2,x,resolve,reject);
                }catch(e){
                    reject(e)
                }
            },0)
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 将成功回调和失败回调存储起来
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    })
    return promise2
}
处理一下异步和其它的错误
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
    // 当前执行状态
    status = PENDING
    // 成功值
    value = undefined
    // 失败原因
    reason = undefined
    // 成功回调
    successCallback = []
    // 失败回调
    failCallback = []

    // new Promise是立即执行
    constructor(executor) {
        try{
            executor(this.resolve, this.reject)
        }catch(e){
            this.reject(e)
        }
    }

    resolve = value => {
        // 如果状态不在等待 阻止程序向下执行
        if (this.status !== PENDING) return
        // 状态变更为成功
        this.status = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判断成功回调是否存在 如果存在 调用
        while (this.successCallback.length) {
            this.successCallback.shift()()
        }
    }

    reject = reason => {
        if (this.status !== PENDING) return
        this.status = REJECTED
        this.reason = reason
        while (this.failCallback.length) {
            this.failCallback.shift()()
        }
    }

    // then中的回调
    then(successCallback, failCallback){
        // 每次this都是上一个promise。
        let This = this;
        let promise2 = new MyPromise((resolve, reject) => {
            if(this.status === FULFILLED){
                setTimeout(()=>{
                    try{
                        let x = successCallback(this.value);
                        resolvePromise(promise2,x,resolve,reject);
                    }catch(e){
                        reject(e)
                    }
                },0)
            } else if(this.status === REJECTED) {
                setTimeout(()=> {
                    try{
                        let x = failCallback(this.reason);
                        resolvePromise(promise2,x,resolve,reject);
                    }catch(e){
                        reject(e)
                    }
                })
            }else{
                // 等待
                // 将成功回调和失败回调存储起来
                this.successCallback.push(() => {
                    setTimeout(()=>{
                        try{
                            let x = successCallback(this.value);
                            resolvePromise(promise2,x,resolve,reject);
                        }catch(e){
                            reject(e)
                        }
                    },0)
                })
                this.failCallback.push(() => {
                    setTimeout(()=> {
                        try{
                            let x = failCallback(this.reason);
                            resolvePromise(promise2,x,resolve,reject);
                        }catch(e){
                            reject(e)
                        }
                    })
                })
            }
        })
        return promise2
    }


}

function resolvePromise(promise2,x, resolve, reject) {
    // 判断 x 的值是普通值还是 primise 对象
    // 如果是普通值 直接调用 resolve 
    // 如果是 promise 对象 查看 promise 对象返回的结果
    // 再根据 promise 对象的返回结果 决定调用 resolve 还是 调用 reject

    if(promise2 === x){
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (x instanceof MyPromise) {
        // promise 对象
        x.then(resolve, reject)
    } else {
        // 普通值
        resolve(x)
    }
}

module.exports = MyPromise
then方法的参数变为可选参数

let promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功')
    },1000)
})

promise.then()
.then(res => {
    console.log(res);
})



then(successCallback, failCallback){
    // 给then回调赋一个方法，传入什么返回什么
    successCallback = successCallback ? successCallback : value => value
    failCallback = failCallback ? failCallback : reason => {throw reason}
    
    ...
}
promise.all 方法
let p1 = new Promise((resolve, reject) => {
    setTimeout(()=>{
        resolve('p1')
    },2000)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(()=>{
        resolve('p2')
    },0)
})
Promise.all(['a','b',p1,p2,'c']).then(res => {console.log(res)})
// ['a','b','p1','p2','c']
// 全部执行完，然后按给定顺序返回值




static all(array){
    let result = [];
    let index = 0
   
    return new MyPromise((resolve, reject) => {
    	// 放在里面才能使用resolve
	     function addData (key, value) {
	        result[key] = value;
	        index ++
	        if(index === array.length){
	            resolve(result)
	        }
	    }
        for(let i = 0; i < array.length; i++){
            let current  = array[i];
            if(current instanceof MyPromise){
                // promise对象
                current.then(value => addData(i,value), reason => reject(reason))
            }else{
                // 普通
                addData(i, array)
            }
        }
        // 这时是for循环结束就执行了，result还没全
        // resolve(result)
    })
}
promise.resolve
const MyPromise = require('./MyPromise')

let p = new MyPromise((resolve, reject) => {
    resolve(99)
})

MyPromise.resolve(10).then(res => {console.log(res);})
MyPromise.resolve(p).then(res => {console.log(res);})



static resolve(value){
    if(value instanceof MyPromise){
        // promise对象
        return value;
    }else{
        // 普通
        return new MyPromise((resolve,reject) => {
            resolve(value)
        })
    }
}
promise finally
finally(callback){
    return this.then(value => {
        callback()
        return value
    },reason => {
        callback()
        throw reason
    })
}


finally(callback){
    return this.then(value => {
        return MyPromise.resolve(callback()).then(() => value)
    },reason => {
        return MyPromise.resolve(callback()).then(() => {throw reason})
    })
}
promise catch
catch(failCallback){
    return this.then(undefined, failCallback)
}
一叶知秋9307
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
模拟实现Promise
liuyaqi1993的博客
03-30 1547
最近复习了一下Promise，决定自己实现一下，加深对Promise流程的理解。当然，这个模拟还不是很完善。/** * 使用MyPromise模拟Promise基本功能： * MyPromise新建就立即执行其参数fn，这点比较重要 * fn里面必须调用状态函数resolve或者reject之一 * 每次.then接受一个处理MyPromise当前状态的回调函数，包括resolve和rej
[精讲]promise对象常用方法，与手写模拟
m0_61696809的博客
02-25 1112
这意味着，当一个宏任务中包含了多个微任务时，这些微任务会在该宏任务执行完成后被依次执行，而不是在该宏任务中立即执行。在 constructor 构造函数中，定义了 Promise 的三种状态：PENDING（进行中）、FULFILLED（已成功）、REJECTED（已失败），以及 Promise 对象的属性，包括状态、成功结果、失败原因、保存成功回调函数的数组和保存失败回调函数的数组。当一个宏任务执行完成后，才会去检查是否存在微任务，如果存在，则会依次执行微任务队列中的任务，直到微任务队列为空。
今日一题 - 请模拟实现一个Promise，2024年最新一招教你看懂Netty
最新发布
2401_84139676的博客
04-16 226
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等前端视频资料：网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
Promise 模拟实现
qq_44888570的博客
03-04 557
前言 最近很想研究一下Promise的原理，通过查阅资料写出了这篇博客，文章有借鉴参考文档。 正文 本文主要实现的是两个点，基本的Promise和then的链式调用。 代码的所有解释都在注释中 定义状态 //定义状态 const FULFILLED = 'fulfilled' const REJECTED = 'rejected' const PENDING = 'pending' 构造函数 function MyPromise(handle) { //this.value 是resolve或re
JavaScript模拟实现Promise功能的示例代码
不定时分享最优质的网络技术与教程，满满的干货。
12-03 395
模拟Promise的功能, 按照下面的步骤,一步一步1. 新建是个构造函数2. 传入一个可执行函数 函数的入参第一个为 fullFill函数 第二个为 reject函数； 函数立即执行， 参数函数异步执行3. 状态一旦更改就不可以变更 只能 pending => fulfilled 或者 pending => rejected4. then 的时候要处理入参的情况 successCallback 和failCallback 均可能为非函数默认的 failCallback 一定要将异常抛出， 这样下一个pro
Promise.js
06-19
手动实现promise的功能，...用于来更加深刻的理解promise，由于es6是官方提出的一个新的概念，每家浏览器厂商实现的底层原理都不一样，所以这个实现的只是模拟用来练习的。更加理解promise，和养成一种良好开发的习惯。
利用ES6的Promise.all实现至少请求多长时间的实例
08-29
利用ES6的Promise.all实现至少请求多长时间的实例 在ES6中，Promise.all是一个非常强大的功能，可以帮助我们轻松地实现至少请求多长时间的实例。下面我们来详细地解释这个知识点。 首先，我们需要了解什么是...
Promise在ie8等不支持Promise的浏览器上的完整实现
08-12
Promise在ie8等不支持Promise的浏览器上的完整实现
promise:基于浏览器的 PromisesA+ 实现
06-18
示例客户端实现。 运行官方测试套件 npm install -g promises-aplus-tests cd tests promises-aplus-tests adapter.js 运行本地茉莉花测试 git submodule init && git submodule update 在浏览器中打开tests/Spec...
详解如何构建Promise队列实现异步函数顺序执行
12-03
我们需要实现一个队列，将这些异步函数添加进队列并且管理它们的执行，队列具有First In First Out的特性，也就是先添加进去的会被先执行，接着才会执行下一个(注意跟栈作区别) 大家也可以类比一下jQuery的animate...
promise的模拟实现
weixin_34413802的博客
03-17 607
1.概述 1.1 什么是promise Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。 1.2 promise解决的问题 1.2.1 回调地狱 Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。 1.2.2 并行结果 如...
模拟实现一个 Promise.finally
包磊磊的博客
03-19 1249
Promise.prototype.finally = function (callback) { let P = this.constructor; return this.then( value => P.resolve(callback()).then(() => value), reason => P.resolve(callback()).t...
根据Promise/A+规范模拟实现Promise
whynotgonow的博客
01-12 678
1 什么是Promise 1.1 Promise 解决的问题 1.1.1 回调地狱 我们在做项目的时候经常遇到多个回调函数嵌套在一起的情况，一层套一层，代码不够直观并且不容易维护，就是所谓的回调地狱。Promise 就很好的解决了这个问题。 1.1.2 并行结果 如果几个异步操作之间并没有前后顺序之分,但需要等多个异步操作都完成后才能执行后续的任务，无法实现并行节约时间。
模拟Promise() 源码
Rock_clip的博客
10-19 174
1.模拟all()方法 在Promise函数中的 all() 方法里面，能够实现在多个Promise对象里面，如果状态全部为resolve的话，则all() 方法返回的结果是resolve，并将所有的Promise对象放到一个数组里面；如果有一个状态为reject的话，则all()方法返回的结果是reject,将第一个出现reject对象的下标作为PromiseResult的值。演示代码如下 总体代码如下： const MyPromise = (...
js之从Promise的基本使用模拟Promise源码
sundaoli_0的博客
10-07 320
11.异常处理，当then方法的成功回调函数中，返回then方法返回的Promise对象时，也就是自己调用自己的情况，系统中的Promise对象会抛出TypeError的异常。在then方法中做判断，返回新的Promise对象与成功回调返回的值（returnValue）相等的时候，调用新的Promise的rejece方法并传入类型异常。8.执行器中有异步操作时，then不会立即得到成功还是失败的状态，因此需要把成功后的回调和失败后的回调存储起来，等待异步操作完成后再执行对应的回调。
Promise实现原理
weixin_33979203的博客
09-29 100
2019独角兽企业重金招聘Python工程师标准>>> ...
ES6系列——纯js手写一个异步操作（promise,async 函数），模拟请求接口
qq_43305958的博客
08-26 1221
纯js手写一个异步操作（promise），模拟请求接口一、异步操作是什么？二、使用步骤1.promise2.async 函数总结 一、异步操作是什么？ 异步模式不用阻塞当前线程来等待其他任务的完成，而是允许当前线程继续执行后面的操作，当异步操作完成后，再去执行回调操作，这样做的好处就是避免其他操作执行的时间太长而使当前线程长时间等待 二、使用步骤 1.promise 代码如下（示例）： samulation() { let promise = new Promise((resolve, rej
promise简单实现
weixin_42619992的博客
04-21 1906
1、最简单的实现 promise有三种状态，分别是Pedding、Fulfilled、Rejected。 Pedding promise对象实例创建时的初始状态 Fulfilled可以理解为成功的状态 Rejected可以理解为失败的状态 2、构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject 3、Promise上还有then方法，then方法就是用来指定Promise对象的状态
promise的模拟设计与实现
06-07
下面是一个简单的Promise模拟设计与实现： ```javascript class MyPromise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onFulfilledCallbacks...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值