从简到难手把手教你写Promise源码 手写 Promise源码

最新推荐文章于 2024-06-09 17:58:18 发布
置顶 最新推荐文章于 2024-06-09 17:58:18 发布
阅读量280 收藏
点赞数 1
分类专栏： js 拉钩大前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45345105/article/details/109692024
版权

先写个简易版的

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

class MyPromise {
    constructor(excecutor){
        excecutor(this.resolve,this.rejected)
    }
    status = PENDING
     // 成功之后的值
    value = undefined;
    // 失败后的原因
    reason = undefined;
    resolve = value =>{
        // statu改变了就不能再改变了 所以先判断一下
        if(this.status !== PENDING) return
       this.status = FULFILLED 
       this.value = value
    }
    rejected = value =>{
        if(this.status !== PENDING) return
        this.status = REJECTED 
        this.value = value
    }
    then = (successCallBack,failCallBack) =>{
        if(this.status === FULFILLED){
            successCallBack(this.value)
        }else if(this.status === REJECTED){
            failCallBack(this.reason)
        }else{
            
        }
    }
}

module.exports = MyPromise

导入执行

const Mypromise = require('./myPromise')



const my = new Mypromise((res,rej)=>{
    res(1)
    rej(2)
})
console.log(my);
my.then(v => console.log(v),v => console.log(v))

简易版加入异步逻辑

在这里插入图片描述
如果直接then会什么都不执行 进入else的分支
上代码

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

class MyPromise {
    constructor(excecutor){
        excecutor(this.resolve,this.rejected)
    }
    status = PENDING
     // 成功之后的值
    value = undefined;
    // 失败后的原因
    reason = undefined;
    successCallBack = undefined
    failCallBack = undefined
    resolve = value =>{
        // statu改变了就不能再改变了 所以先判断一下
        if(this.status !== PENDING) return
       this.status = FULFILLED 
       this.value = value
    //    如果有就调用
       this.successCallBack &&  this.successCallBack(this.value)
    }
    rejected = value =>{
        if(this.status !== PENDING) return
        this.status = REJECTED 
        this.reason = value
        this.failCallBack &&  this.failCallBack(this.reason)
    }
    then (successCallBack,failCallBack) {
        if(this.status === FULFILLED){
            successCallBack(this.value)
        }else if(this.status === REJECTED){
            failCallBack(this.reason)
        }else{
            // 如果status没改变说明 res和rej都没执行 先存起来
            this.successCallBack = successCallBack  
            this.failCallBack = failCallBack 
        }
    }
}

module.exports = MyPromise

在这里插入图片描述

简易版加入异步逻辑实现多次调用添加处理函数

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

class MyPromise {
    constructor(excecutor){
        excecutor(this.resolve,this.rejected)
    }
    status = PENDING
     // 成功之后的值
    value = undefined;
    // 失败后的原因
    reason = undefined;
    successCallBack = []
    failCallBack = []
    resolve = value =>{
        // statu改变了就不能再改变了 所以先判断一下
        if(this.status !== PENDING) return
       this.status = FULFILLED 
       this.value = value
    //    如果有就调用
    while(this.successCallBack.length) this.successCallBack.shift()(this.value)
    }
    
    rejected = value =>{
        if(this.status !== PENDING) return
        this.status = REJECTED 
        this.reason = value
        while(this.failCallBack.length) this.failCallBack.shift()(this.reason)
    }
    
    then (successCallBack,failCallBack) {
        if(this.status === FULFILLED){
            successCallBack(this.value)
        }else if(this.status === REJECTED){
            failCallBack(this.reason)
        }else{
            // 如果status没改变说明 res和rej都没执行 先存起来
            this.successCallBack.push(successCallBack)   
            this.failCallBack.push(failCallBack)   
        }
    }
}

module.exports = MyPromise

在这里插入图片描述

实现then的链式调用 part1

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

class MyPromise {
    constructor(excecutor){
        excecutor(this.resolve,this.rejected)
    }
    status = PENDING
     // 成功之后的值
    value = undefined;
    // 失败后的原因
    reason = undefined;
    successCallBack = []
    failCallBack = []
    resolve = value =>{
        // statu改变了就不能再改变了 所以先判断一下
        if(this.status !== PENDING) return
       this.status = FULFILLED 
       this.value = value
    //    如果有就调用
    while(this.successCallBack.length) this.successCallBack.shift()(this.value)
    }
    
    rejected = value =>{
        if(this.status !== PENDING) return
        this.status = REJECTED 
        this.reason = value
        while(this.failCallBack.length) this.failCallBack.shift()(this.reason)
    }
    // 实现链式调用then
    
    then (successCallBack,failCallBack) {
        let promise2 = new MyPromise((res,rej)=>{
           
            if(this.status === FULFILLED){
                let x =   successCallBack(this.value)
                res(x)
              }else if(this.status === REJECTED){
                  failCallBack(this.reason)
              }else{
                  // 如果status没改变说明 res和rej都没执行 先存起来
                  this.successCallBack.push(successCallBack)   
                  this.failCallBack.push(failCallBack)   
              }
        });
        

        return promise2
    }
}

module.exports = MyPromise

结果

const my = new Mypromise((res,rej)=>{
    res(1)
    // setTimeout(()=>{
    //     res(1)
    // },1500)
    // rej(2)
})

my.then(v => 100,v => console.log(v))
.then(v => console.log(v),v => console.log(v)) 100

实现then的链式调用 part2

判断返回值是普通值还是promise对象

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

class MyPromise {
    constructor(excecutor){
        excecutor(this.resolve,this.rejected)
    }
    status = PENDING
     // 成功之后的值
    value = undefined;
    // 失败后的原因
    reason = undefined;
    successCallBack = []
    failCallBack = []
    resolve = value =>{
        // statu改变了就不能再改变了 所以先判断一下
        if(this.status !== PENDING) return
       this.status = FULFILLED 
       this.value = value
    //    如果有就调用
    while(this.successCallBack.length) this.successCallBack.shift()(this.value)
    }
    
    rejected = value =>{
        if(this.status !== PENDING) return
        this.status = REJECTED 
        this.reason = value
        while(this.failCallBack.length) this.failCallBack.shift()(this.reason)
    }
    // 实现链式调用then
    
    then (successCallBack,failCallBack) {
        let promise2 = new MyPromise((res,rej)=>{
           
            if(this.status === FULFILLED){
                let x =   successCallBack(this.value)
                resolvePromise(x,res,rej)
                // res(x)
            // 判断 x 的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve 
            // 如果是promise对象 查看promsie对象返回的结果 
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
              }else if(this.status === REJECTED){
                  failCallBack(this.reason)
              }else{
                  // 如果status没改变说明 res和rej都没执行 先存起来
                  this.successCallBack.push(successCallBack)   
                  this.failCallBack.push(failCallBack)   
              }
        });
        

        return promise2
    }
}
function resolvePromise(x,res,rej){
    if(x instanceof MyPromise){
        x.then(res,rej)
     
    }else{
        res(x)
    }
}

module.exports = MyPromise

结果

// const MyPromise = require('../myPromise')
const Mypromise = require('./myPromise')
// 


const my = new Mypromise((res,rej)=>{
    res(1)
    // setTimeout(()=>{
    //     res(1)
    // },1500)
    // rej(2)
})

function other (){
    return new Mypromise((res,rej)=>{
        res('other')
    })
}

my.then(v => other(),v => console.log(v))
.then(v => console.log(v),v => console.log(v)) 
2
other

then 方法链式调用识别 Promise 对象自返回

防止调自己
在这里插入图片描述

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

class MyPromise {
    constructor(excecutor){
        excecutor(this.resolve,this.rejected)
    }
    status = PENDING
     // 成功之后的值
    value = undefined;
    // 失败后的原因
    reason = undefined;
    successCallBack = []
    failCallBack = []
    resolve = value =>{
        // statu改变了就不能再改变了 所以先判断一下
        if(this.status !== PENDING) return
       this.status = FULFILLED 
       this.value = value
    //    如果有就调用
    while(this.successCallBack.length) this.successCallBack.shift()(this.value)
    }
    
    rejected = value =>{
        if(this.status !== PENDING) return
        this.status = REJECTED 
        this.reason = value
        while(this.failCallBack.length) this.failCallBack.shift()(this.reason)
    }
    // 实现链式调用then
    
    then (successCallBack,failCallBack) {
        let promise2 = new MyPromise((res,rej)=>{
           
            if(this.status === FULFILLED){
               setTimeout(()=>{
                let x =   successCallBack(this.value)
                //new 的过程中拿不到promise2 改成异步的就行了
                resolvePromise(promise2,x,res,rej)
                // res(x)
            // 判断 x 的值是普通值还是promise对象
            // 如果是普通值 直接调用resolve 
            // 如果是promise对象 查看promsie对象返回的结果 
            // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
               },0)
              }else if(this.status === REJECTED){
                  failCallBack(this.reason)
              }else{
                  // 如果status没改变说明 res和rej都没执行 先存起来
                  this.successCallBack.push(successCallBack)   
                  this.failCallBack.push(failCallBack)   
              }
        });
        

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

module.exports = MyPromise

结果

let p1 = my.then(v => 
    {return p1},v => console.log(v))

    p1.then(v => console.log(v),v => console.log(v))
    
// TypeError: Chaining cycle detected for promise #<Promise>

捕获错误及 then 链式调用其他状态代码补充

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

class MyPromise {
    constructor(excecutor){
        try {
            excecutor(this.resolve,this.rejected)
        } catch (e) {
            this.rejected(e);
        }
    }
    status = PENDING
     // 成功之后的值
    value = undefined;
    // 失败后的原因
    reason = undefined;
    successCallBack = []
    failCallBack = []
    resolve = value =>{
        // statu改变了就不能再改变了 所以先判断一下
        if(this.status !== PENDING) return
       this.status = FULFILLED 
       this.value = value
    //    如果有就调用
    while(this.successCallBack.length) this.successCallBack.shift()()
    }
    
    rejected = value =>{
        if(this.status !== PENDING) return
        this.status = REJECTED 
        this.reason = value
        while(this.failCallBack.length) this.failCallBack.shift()()
    }
    // 实现链式调用then
    
    then (successCallBack,failCallBack) {
        let promise2 = new MyPromise((res,rej)=>{
           
            if(this.status === FULFILLED){
               
                setTimeout(()=>{
                    try {
                    let x =   successCallBack(this.value)
                    //new 的过程中拿不到promise2 改成异步的就行了
                    resolvePromise(promise2,x,res,rej)
                    // res(x)
                // 判断 x 的值是普通值还是promise对象
                // 如果是普通值 直接调用resolve 
                // 如果是promise对象 查看promsie对象返回的结果 
                // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                    } catch (e) {
                        rej(e)
                    }
                   },0)
               
              }else if(this.status === REJECTED){
                 
                  setTimeout(()=>{
                    try {
                    let x =    failCallBack(this.reason)
                    //new 的过程中拿不到promise2 改成异步的就行了
                    resolvePromise(promise2,x,res,rej)
                    // res(x)
                // 判断 x 的值是普通值还是promise对象
                // 如果是普通值 直接调用resolve 
                // 如果是promise对象 查看promsie对象返回的结果 
                // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                    } catch (e) {
                        rej(e)
                    }
                   },0)
              }else{
                  // 如果status没改变说明 res和rej都没执行 先存起来
                  this.successCallBack.push(()=>{
                    setTimeout(()=>{
                        try {
                        let x =   successCallBack(this.value)
                        //new 的过程中拿不到promise2 改成异步的就行了
                        resolvePromise(promise2,x,res,rej)
                        // res(x)
                    // 判断 x 的值是普通值还是promise对象
                    // 如果是普通值 直接调用resolve 
                    // 如果是promise对象 查看promsie对象返回的结果 
                    // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        } catch (e) {
                            rej(e)
                        }
                       },0)
                  })   
                  this.failCallBack.push(()=>{
                    setTimeout(()=>{
                        try {
                        let x =    failCallBack(this.reason)
                        //new 的过程中拿不到promise2 改成异步的就行了
                        resolvePromise(promise2,x,res,rej)
                        // res(x)
                    // 判断 x 的值是普通值还是promise对象
                    // 如果是普通值 直接调用resolve 
                    // 如果是promise对象 查看promsie对象返回的结果 
                    // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        } catch (e) {
                            rej(e)
                        }
                       },0)
                  })   
              }
        });
        

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

module.exports = MyPromise

// const MyPromise = require('../myPromise')
const Mypromise = require('./myPromise')
// 


const my = new Mypromise((res,rej)=>{
//    throw new Error('fail')
    // res(2)
    setTimeout(()=>{
        res(1)
    },1500)
    // rej(2)
})

// function other (){
//     return new Mypromise((res,rej)=>{
//         res('other')
//     })
// }
let f = function fail(v){
    console.log('fail log1');
    console.log(v);
    // throw new Error('fail then')
    // return 33
}
let s = function success(v){
    console.log('success log1');
    console.log(v);
    return 2
    //  throw new Error('success then')
}

my.then(s,f)
.then(v => console.log(v),v => console.log(v))

success log1
1
2

将 then 方法的参数变成可选参数

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

class MyPromise {
    constructor(excecutor){
        try {
            excecutor(this.resolve,this.rejected)
        } catch (e) {
            this.rejected(e);
        }
    }
    status = PENDING
     // 成功之后的值
    value = undefined;
    // 失败后的原因
    reason = undefined;
    successCallBack = []
    failCallBack = []
    resolve = value =>{
        // statu改变了就不能再改变了 所以先判断一下
        if(this.status !== PENDING) return
       this.status = FULFILLED 
       this.value = value
    //    如果有就调用
    while(this.successCallBack.length) this.successCallBack.shift()()
    }
    
    rejected = value =>{
        if(this.status !== PENDING) return
        this.status = REJECTED 
        this.reason = value
        while(this.failCallBack.length) this.failCallBack.shift()()
    }
    // 实现链式调用then
    
    then (successCallBack,failCallBack) {
        successCallBack = successCallBack ? successCallBack : value => value
        failCallBack = failCallBack ? failCallBack : reason => {throw reason}
        let promise2 = new MyPromise((res,rej)=>{
           
            if(this.status === FULFILLED){
               
                setTimeout(()=>{
                    try {
                    let x =   successCallBack(this.value)
                    //new 的过程中拿不到promise2 改成异步的就行了
                    resolvePromise(promise2,x,res,rej)
                    // res(x)
                // 判断 x 的值是普通值还是promise对象
                // 如果是普通值 直接调用resolve 
                // 如果是promise对象 查看promsie对象返回的结果 
                // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                    } catch (e) {
                        rej(e)
                    }
                   },0)
               
              }else if(this.status === REJECTED){
                 
                  setTimeout(()=>{
                    try {
                    let x =    failCallBack(this.reason)
                    //new 的过程中拿不到promise2 改成异步的就行了
                    resolvePromise(promise2,x,res,rej)
                    // res(x)
                // 判断 x 的值是普通值还是promise对象
                // 如果是普通值 直接调用resolve 
                // 如果是promise对象 查看promsie对象返回的结果 
                // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                    } catch (e) {
                        rej(e)
                    }
                   },0)
              }else{
                  // 如果status没改变说明 res和rej都没执行 先存起来
                  this.successCallBack.push(()=>{
                    setTimeout(()=>{
                        try {
                        let x =   successCallBack(this.value)
                        //new 的过程中拿不到promise2 改成异步的就行了
                        resolvePromise(promise2,x,res,rej)
                        // res(x)
                    // 判断 x 的值是普通值还是promise对象
                    // 如果是普通值 直接调用resolve 
                    // 如果是promise对象 查看promsie对象返回的结果 
                    // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        } catch (e) {
                            rej(e)
                        }
                       },0)
                  })   
                  this.failCallBack.push(()=>{
                    setTimeout(()=>{
                        try {
                        let x =    failCallBack(this.reason)
                        //new 的过程中拿不到promise2 改成异步的就行了
                        resolvePromise(promise2,x,res,rej)
                        // res(x)
                    // 判断 x 的值是普通值还是promise对象
                    // 如果是普通值 直接调用resolve 
                    // 如果是promise对象 查看promsie对象返回的结果 
                    // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
                        } catch (e) {
                            rej(e)
                        }
                       },0)
                  })   
              }
        });
        

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

module.exports = MyPromise

结果

const my = new Mypromise((res,rej)=>{
//    throw new Error('fail')
    res('promise success')
    // setTimeout(()=>{
    //     res(1)
    // },1500)
    // rej(2)
})

my.then().then().then(v=> console.log(v),v=> console.log(v))
//promise success

Promise.all 方法的实现

All方法回顾：数组为参数，按顺序执行，有一个失败就都失败，直接返回数组结果，都成功返回所有数组结果
在这里插入图片描述
在这里插入图片描述
使用index 长度对比arr长度 如果相等，证明所有都执行完了
上代码

 static all (arr){
        let result = []
        let index = 0
      return  new MyPromise((res,rej)=>{
            function addResult(value,i){
                result[i] = value
                index++
                if(index === arr.length){
                    res(result)
                }
            }
            for(let i = 0; i < arr.length;i++){
                let current = arr[i]
                if(current instanceof MyPromise){
                    
                    current.then(value => addResult(value,i),reason =>rej(reason))
                }else{
                    addResult(current,i)
                }
            }
           
        })
      
    }

结果

let p1 = new MyPromise((res,rej)=>{
    setTimeout(()=>{
        res('p1')
    },1000)
})

let p2 = new MyPromise((res,rej)=>{
    // res('p2')
    rej('p2')
})
MyPromise.all(['12',p1,p2,'3']).then(v =>{console.log(v)},v =>{console.log(v)})
//p2

Promise.resolve 方法的实现

较简单就不贴其他代码了，判断是否是promise 是就返回，是普通值就new一个promise反回

   static resolve(v){
        if(v instanceof MyPromise) return v
        return new MyPromise((res,rej)=>{res(v)})
           
    }

let p1 = new MyPromise((res,rej)=>{
    setTimeout(()=>{
        res('p1')
    },1000)
})

let p2 = new MyPromise((res,rej)=>{
    // res('p2')
    rej('p2')
})
MyPromise.resolve(p1).then(res => console.log(res))
MyPromise.resolve('p12').then(res => console.log(res))

finally 方法的实现

   finally (callback){
        return this.then(value =>{
            return MyPromise.resolve(callback()).then(()=> value)
        }, reason =>{
            return MyPromise.resolve(callback()).then(()=> {throw reason})
        })
    }

catch 方法的实现

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

let p2 = new MyPromise((res,rej)=>{
    // res('p2')
    rej('p2')
})

p2.then(v=>console.log(2)).catch(v=>console.log(v)) //p2

/*
  1. Promise 就是一个类 在执行这个类的时候 需要传递一个执行器进去()=>{} 执行器会立即执行
  2. Promise 中有三种状态 分别为 成功 fulfilled 失败 rejected 等待 pending
    pending -> fulfilled
    pending -> rejected
    一旦状态确定就不可更改
  3. resolve和reject函数是用来更改状态的
    resolve: fulfilled
    reject: rejected
  4. then方法内部做的事情就判断状态 如果状态是成功 调用成功的回调函数 如果状态是失败 调用失败回调函数 then方法是被定义在原型对象中的
  5. then成功回调有一个参数 表示成功之后的值 then失败回调有一个参数 表示失败后的原因
  6. 同一个promise对象下面的then方法是可以被调用多次的
  7. then方法是可以被链式调用的, 后面then方法的回调函数拿到值的是上一个then方法的回调函数的返回值
*/

const MyPromise = require('./myPromise');

function p1 () {
  return new MyPromise(function (resolve, reject) {
    setTimeout(function () {
      resolve('p1')
    }, 2000)
  })
}
function p2 () {
  return new MyPromise(function (resolve, reject) {
    reject('失败')
    // resolve('成功');  
  })
}

p2()
  .then(value => console.log(value))
  .catch(reason => console.log(reason))

race方法实现

static race(arr){
        let mypro = new JackPromise((res,rej)=>{
            for(let i = 0;i<arr.length;i++){
                if(arr[i] instanceof JackPromise){
                    arr[i].then(res,rej)
                }else{
                    res(arr[i])
                }
            }
        })
        return mypro
    }
    JackPromise.race([p2,2]).then(v=>console.log(v))
Jack おう
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手把手教你手写SpringMvc框架(附源码)
06-21
Java编程的学习，一直以来都是一门非常重量级的学习科目，本教程以项目实战为导向，帮助广大学员手把手教学，本课程从无到有，循序渐进的手写mvc框架，由于官方的框架比较复杂，为了让同学们能够学懂，先从简单地MVC...
手把手教你手写Spring框架(附源码)
06-30
本教程以项目实战为导向，帮助广大学员手把手教学，本课程从无到有，循序渐进的手写mvc框架，由于官方的框架比较复杂，为了让同学们能够学懂，先从简单地IOC框架入手，然后不断地升级和迭代，逐渐成为官方比较接近的...
promise的源码解析 promise方法源码编写
weixin_44292923的博客
01-07 940
promise的源码解析 promise方法源码编写
Promise手写源码以及api详解-----学了就会学完就忘系列
杜杜的博客
06-09 277
/* 1、通过class关键字创建一个类 MyPromise 2、我们需要使用构造函数constructor 来接受这个构造函数,executor代表执行器(执行器是立即执行的,执行器就代表回调函数) */ const PENGDING = 'pending' const FULFILLED = 'fulfilled' const REJECTED = 'rejected' class MyPromise { constructor(executor) { // 当前
手写Promise源码
最新发布
qq_74217055的博客
06-09 102
【代码】手写Promise源码。
手写promise大致源码
weixin_45429409的博客
11-27 335
【代码】手写promise大概源码。 原生js大致实现promise源码
写给小白的手写promise源码
Lin__hr的博客
07-04 164
promise是解决异步编程的一种方案，可以解决回调地狱等问题，promise是有状态的，根据promise的状态采用不同的处理结果，promise在如今的前端领域应用是否广泛，所以作为前端学习者，一定要掌握promise及其内部原理，同时·，这也是面试的高频考点.........
手把手教你实现 Promise的使用方法
12-17
前言 很多 JavaScript 的初学者都曾感受过被回调地狱支配的恐惧，直至掌握了 Promise 语法才算解脱。虽然很多语言都早已内置...今天我们就一步一步来实现一个 Promise，如果你还没有用过 Promise，建议先熟悉一下 Promi
手把手教你写一个微信小程序
02-24
现在微信小程序越来越火，用户不需下载安装app即可体验产品，产品推广和运营也比较方便，这些优点使得越来越多的企业选择开发微信小程序，所以会写小程序也成为前端比较重要的技能，今天就来教大家怎么入门微信小...
【手写 Promise 源码】第十三篇 - Promise.allsettled 和 Promise.any 的实现
BraveWangDev
02-01 872
本篇，主要实现 Promise 静态 API：`Promise.allSettled` 和 `Promise.any`，主要涉及以下几个点：1，测试原生 Promise.allsettled 的使用；2，Promise.allsettled 原理分析、源码实现、功能测试；3，Promise.any 原理分析、源码实现、功能测试；
Promise-A-Plus:纯 TypeScript 手写 Promise A+
05-29
手写 Promise A+ English： 术语 解决（fulfill） 指的是一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中使用 fulfill 来表示解决，但是目前常用 resolve 来取代。 拒绝（reject） 指的是一个 promise 失败时进行的操作。 终值（eventual value） 所谓终值，指的是 promise 被解决是传递给解决回调的值，由于 promise 有一次性的特征，因此当这个值被传递的时候，标志着 promise 等待态的结束，故称之为终值，也简称为值（value）。 据因（reason） 拒绝的原因，指的是 promise 被拒绝是传递给拒绝回调函数的值。 Promise 的状态 一个 Promise 的当前状态必须为以下三种状态中的一种 等待态（pending） 处于等待态时，promise 可以迁移至执行态
【手写 Promise 源码】第一篇 - Promise 简介
BraveWangDev
01-26 874
本篇，对 Promise 进行了简单介绍，主要涉及以下几个点：1，Promise 简介和基本使用；2，Promise 和 callback 对比；3，Promise 的重要性和作用；4，Promise 使用场景：Promisify 封装；5，Promise 的优缺点、兼容性；
手写实现promise源码（附源码）
GHkmmm的个人博客
07-30 421
手写实现promise源码 源码下载 一、前言 需要掌握以下知识点 promise的基本使用 promise常见的API Js的事件循环机制 想复习或者学习promise的同学可以看看这篇文章 实现的主要功能 Promise.prototype.then Promise.prototype.catch Promise.resolve Promise.reject Promise.all Promise.race 二、代码实现 整体结构实现 (function(window){ const
手写promise源码
qq_41923008的博客
10-29 163
// 静态声明promise的三种状态 const PENDING = 'pending'; // 等待 const FULFILLED = 'fulfilled'; // 成功 const REJECTED = 'rejected'; // 失败 // 处理resove函数返回的结果 const resovePromise = (promise, x, resolve, reject) => { // 如果返回自己本身抛出错误 if (promise === x) { .
高级前端修炼之路：一步步教你手写Promise底层源码
前端工程师
11-20 972
在之前的《高级前端修炼之路：深入理解JQuery底层源码》的文章中，我已经详细介绍了Jquery中的Deferred延迟对象的用法并模拟了它的一些底层源码的实现。今天要介绍的，是ES6中一个和JQ延迟对象非常相似的对象——Promise。 JQ中Deferred对象的决议结果有三种可能：resolve、reject和notify，分别代表成功、失败和等待状态。而Pro...
从零开始：手把手教你理解并实现JavaScript Promise
本文将深入讲解如何在JavaScript中实现Promise，一种解决异步编程问题的关键技术。首先，理解Promise的重要性，它是在JavaScript中解决回调地狱困境的关键，尤其是在jQuery 1.5引入Promise支持并结合其链式调用特性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值