promise 核心封装

置顶 已于 2022-08-10 16:45:02 修改
阅读量744 收藏 1
点赞数
分类专栏： js 文章标签： javascript js es6 前端
于 2020-12-13 20:28:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Altaird/article/details/110949020
版权

promise，在项目开发应该大家都不陌生吧，今天我们来看下promise是怎么实现，自己手写一个promise。

首先我们来看封装一个promise需要什么条件

 let promise = new Promise((resolve,reject) => {})
 console.log(promise)

在这里插入图片描述

由上可知，我们看到promise身上有状态，返回值，__proto__上有一些方法，所以我们可以采用class的方式来创建。

// 手写promise
class XG {
  // 属于promise类的静态属性
  static PENDING = 'pending';

  static FULFILLED = 'fulfilled';

  static REJECTED = 'rejected';

  constructor(executor){
    // 设置XG初始化身上的值
    this.status = XG.PENDING
    this.value = null
    // 绑定promise,resolve,reject方法，注意这里this指向问题
    executor(this.resolve.bind(this), this.reject.bind(this))
  }
  // promise 成功捕捉
  resolve(value) {
    console.log(this.status)
    // 设置条件只有在pending状态下才可以改变状态
    if (this.status == XG.PENDING) {
      // 修改status状态
      this.status = XG.FULFILLED
      this.value = value
    }
  }
  // promise 失败捕捉
  reject(value) {
    // 设置条件只有在pending状态下才可以改变状态
    if (this.status == XG.PENDING) {
      // 修改status状态
      this.status = XG.REJECTED
      this.value = value
    }
  }
}

这样就一个简易的promise出来了，接下来是封装then函数。

  // 设置then函数中设置resolve,reject两个函数返回
  then(onFulfilled = () => {}, onRejected  = () => {}) {
    // 设置条件只有在fulfilled状态下才可以改变状态
    if (this.status == XG.FULFILLED) {
      onFulfilled(this.value);
    }
    // 设置条件只有在rejected状态下才可以改变状态
    if (this.status == XG.REJECTED) {
      onRejected(this.value);
    }
  }

在这就完成我们的then函数基本构造， 引入我们封装的js，改变reject状态可见在浏览器中完美输出。

<script src="./promise.js"></script>
<script>
  new XG((resolve,reject) => {
    // resolve('成功状态')
    reject('失败状态')
  }).then(res => {
    console.log(res)
  },error => {
    console.log(error)
  })
  // let promise = new Promise((resolve,reject) => {})
  // console.log(promise)
</script>

在这里插入图片描述

现在有一个问题，因为js是单线程执行下来，是会先执行同步，在执行微任务，最后执行宏任务，在promise中，then函数是会被放入微任务队列当中。现在我们封装的then方法是会跟同步一起执行，所以我们需要在then函数中设置一下。

 // 设置then函数中设置resolve,reject两个函数返回
  then(onFulfilled = () => {}, onRejected  = () => {}) {
    // 设置条件只有在fulfilled状态下才可以改变状态
    if (this.status == XG.FULFILLED) {
      // 把任务加入宏任务队列中
      setTimeout(() => {
        // 对我们的then中的错误捕捉
        try {
          onFulfilled(this.value);
        } catch (error) {
          onRejected(error)
        }
      });
    }
    // 设置条件只有在rejected状态下才可以改变状态
    if (this.status == XG.REJECTED) {
      // 把任务加入宏任务队列中
      setTimeout(() => {
        // 对我们的then中的错误捕捉
        try {
          onRejected(this.value);
        } catch (error) {
          onRejected(error)
        }
      })
    }
  }

  let promise = new XG((resolve,reject) => {
    reject('失败状态')
  }).then(res => {
    console.log(res)
  },error => {
    console.log(error,'微任务')
  })
  console.log('同步代码')

在这里插入图片描述

现在有一个问题是当我们在一秒钟后改变状态的时候，并不会触发then函数中状态捕获，因为，在new 类的时候，then函数已经执行，所以我们需要在then函数中对pending状态捕获。

// 设置一个数组，将未来需要变化的状态函数存放进去
this.callbacks = [];
// 在then中对pending状态捕捉
if (this.status == XG.PENDING) {
  // 当前状态为pending状态时，提前将onFulfilled，onRejected存放进去
  this.callbacks.push({
    // 延迟后对错误的处理
    onFulfilled: value => {
      try {
        onFulfilled(value)
      } catch (error) {
        onRejected(error)
      }
    },
     // 延迟后对错误的处理
    onRejected: value => {
      try {
        onRejected(value)
      } catch (error) {
        onRejected(error)
      }
    }
  })
}
// 当延迟执行resolve函数时，遍历数组，执行状态成功方法
this.callbacks.filter(item => {
   item.onFulfilled(value)
})
// 当延迟执行reject函数时，遍历数组，执行状态成功方法
this.callbacks.filter(item => {
  item.onRejected(value)
})

这样就解决延迟后对状态的捕获。这样还有一个问题，当延时后改变状态时，有同步代码，会先改变状态，所以我们需要把改变状态变为异步操作。

// 状态为padding状态时，加入宏任务队列
setTimeout(() => {
  // 当延迟执行resolve函数时，遍历数组，执行状态成功方法
  this.callbacks.filter(item => {
    item.onRejected(value)
  })
});

// 状态为padding状态时，加入宏任务队列
setTimeout(() => {
  // 当延迟执行reject函数时，遍历数组，执行状态成功方法
  this.callbacks.filter(item => {
    item.onFulfilled(value)
  })
});

promise中的then函数是可以连续点then, then是返回一个新的promise，和之前的promise没有关系， 所以在这，我们的then函数需要进一步封装。

// 设置then函数中设置resolve,reject两个函数返回
  then(onFulfilled = () => {}, onRejected  = () => {}) {
  	// 每次then函数都返回出一个新的pormise实例
    return new XG((resolve,reject) => {
      if (this.status == XG.PENDING) {
        // 当前状态为pending状态时，提前将onFulfilled，onRejected存放进去
        this.callbacks.push({
          // 延迟后对错误的处理
          onFulfilled: value => {
            try {
            // 获取成功状态的返回值，将返回值由下一次成功状态抛出
             let result =  onFulfilled(value)
             resolve(result);
            } catch (error) {
              onRejected(error)
            }
          },
           // 延迟后对错误的处理
          onRejected: value => {
            try {
              // 获取成功状态的返回值，将返回值由下一次成功状态抛出
              let result = onRejected(value)
              resolve(result);
            } catch (error) {
              onRejected(error)
            }
          }
        })
      }
      // 设置条件只有在fulfilled状态下才可以改变状态
      if (this.status == XG.FULFILLED) {
        // 把任务加入宏任务队列中
        setTimeout(() => {
          // 对我们的then中的错误捕捉
          try {
            // 获取成功状态的返回值，将返回值由下一次成功状态抛出
            let result = onFulfilled(this.value);
            resolve(result);
          } catch (error) {
            onRejected(error)
          }
        });
      }
      // 设置条件只有在rejected状态下才可以改变状态
      if (this.status == XG.REJECTED) {
        // 把任务加入宏任务队列中
        setTimeout(() => {
          // 对我们的then中的错误捕捉
          try {
          	// 获取成功状态的返回值，将返回值由下一次成功状态抛出
            let result = onRejected(this.value);
            resolve(result);
          } catch (error) {
            onRejected(error)
          }
        })
      }
    })
  }

让我们引入封装的promise，验证一下。

let promise = new XG((resolve,reject) => {
    resolve('成功')
  }).then(res => {
    console.log(res)
    return 'two2'
  },error => {
    console.log(error,'微任务')
    return '成功'
  }).then(res => {
    console.log('成功：' + res)
  },error => {
    console.log('失败：' + error)

在这里插入图片描述

这里要注意一点的是，当我们使用原生promise，抛出状态时，then函数中没有写函数，状态值会被下一次then抛出来。

let promise = new Promise((resolve,reject) => {
    resolve('成功')
  })
  .then()
  .then(res => {
    console.log(res)
  },error => {
      console.log(error);
    }
  )

在这里插入图片描述

所以我们需要给then函数中设置默认函数返回值。

then(onFulfilled = () => this.value, onRejected  = () => this.value) {}

现在有一个问题是原生promise函数.then中可以new 出一个新的实例，下一次then函数中可以获取到这个值。

 let promise = new Promise((resolve,reject) => {
    resolve('成功')
  })
  .then(res => {
    return new Promise((resolve, reject) => {
      resolve('新的promise')
    })
  })
  .then(res => {
    console.log(res)
  })

在这里插入图片描述

接下来引用我们的promise查看一下。

let promise = new XG((resolve,reject) => {
    resolve('成功')
  })
  .then(res => {
    return new XG((resolve, reject) => {
      resolve('新的promise')
    })
  })
  .then(res => {
    console.log(res);
  })

在这里插入图片描述

我们的promise中下一次then函数获取到得是整个promise，所以我们需要吧then函数改变一下。

// 在then函数中我们需要对 FULFILLED 和 REJECTED 和 FULFILLED 状态下进行判断
// 判断一下当前返回值是否由XG类实现，是的话他就是一个promise
let result = onFulfilled(this.value);
if (result instanceof XG) {
  // 调用它的then函数，改变状态，把返回值抛出 
  result.then(res => {
    resolve(res)
  }, reason => {
    reject(reason)
  })
} else {
  resolve(result);
}

以上代码有点些繁琐，我们可以简化下

 let result = onFulfilled(this.value);
 // 判断一下当前返回值是否由XG类实现，是的话他就是一个promise
  if (result instanceof XG) {
    // 下面resolve,reject是之前new XG身上的函数，返回新的promise的then会调用这个两个函数，同时也会把参数传入这两个函数。
    result.then(resolve,reject)
  } else {
    resolve(result);
  }

try {
   // 判断一下当前返回值是否由XG类实现，是的话他就是一个promise
    if (result instanceof XG) {
      // 调用它的then函数，改变状态，把返回值抛出
      result.then(resolve,reject)
    } else {
      resolve(result);
    }
  } catch (error) {
    reject(error)
  }

上边的三个状态的代码重复性比较多，我们可以把相同部分提出过，封装成一个函数。

 // 函数复用
  multiplex(result, resolve, reject) {
    // 对我们的then中的错误捕捉
    try {
      // 判断一下当前返回值是否由XG类实现，是的话他就是一个promise
      if (result instanceof XG) {
        // 调用它的then函数，改变状态，把返回值抛出
        result.then(resolve,reject)
      } else {
        resolve(result);
      }
    } catch (error) {
      reject(error)
    }
  }

// PENDING 状态下
// 注意是PENDING 下的value是由上一次resolve传入过来
this.multiplex(onFulfilled(value), resolve, reject);
this.multiplex(onRejected(value), resolve, reject);
// FULFILLED 状态下
this.multiplex(onFulfilled(this.value), resolve, reject);
// REJECTED 状态下
this.multiplex(onRejected(this.value), resolve, reject);

在原生 promise 中，then函数中不允许返回自己本身一样的promise

let promise = new Promise((resolve,reject) => {
    resolve('成功')
  })
  let p =  promise.then(res => {
    return p
  })

在这里插入图片描述

我们封装的 then 方法没有对这一错误进行捕捉，我们需要重新封装一下

// 把返回新的promise 封装给一个对象
let promise = new XG((resolve,reject) => {}
// 由于是在宏任务当中，是异步执行，可以访问自己，把当前promise对象传入复用函数当中
this.multiplex(promise, onFulfilled(value), resolve, reject);
// 函数复用
multiplex(promise, result, resolve, reject) {
  // 判断是否是自己本身
  if (promise == result) {
    // 主动抛出错误
    throw new TypeError("Chaining cycle detected")
  }
  // 对我们的then中的错误捕捉
  try {
    // 判断一下当前返回值是否由XG类实现，是的话他就是一个promise
    if (result instanceof XG) {
      // 调用它的then函数，改变状态，把返回值抛出
      result.then(resolve,reject)
    } else {
      resolve(result);
    }
  } catch (error) {
    reject(error)
  }
}

在原生promsie当中，是可以直接Promise.resolve(“成功”)，进行改变状态，可以在then函数当时获取到resolve当中的值。

 Promise.resolve("成功").then(res =>  {
   console.log(res);
 })
 Promise.reject("失败").then(null,reason =>  {
   console.log(reason);
 })

在这里插入图片描述

所以我们需要在封装的promise定义两个静态属性方法

// 封装自定属性resolve方法。
  static resolve(value) {
    // 每次调用都是返回一个新的promise实例。
    return new XG((resolve,reject) => {
      // 改变当前的状态，并把传入进来的值抛出去
      resolve(value)
    })
  }

// 引入我们的XG类
XG.resolve("成功").then(res => {
  console.log(res);
})

在这里插入图片描述

上边是对成功状态的捕捉，现在还有一种情况是当我们在resolve()，传入一个promise，后面的then函数是对传入的promise的状态捕捉，所以我们需要在resolve中判断一下。

 // 封装自定属性resolve方法。
 static resolve(value) {
   // 每次调用都是返回一个新的promise实例。
   return new XG((resolve, reject) => {
     // 判断传入进来的参数是不是一个prosmie，如果是调用它的then函数改变方法，否则直接成功状态返回。
     if (value instanceof XG) {
       value.then(resolve, reject)
     } else {
       // 改变当前的状态，并把传入进来的值抛出去
       resolve(value)
     }
   })
 }

// 引入我们的XG类
let p = new XG((resolve, reject) => {
  reject("失败")
})
XG.resolve(p).then(null, reason => {
  console.log(reason);
})

在这里插入图片描述

测试成功，接下来是是对reject()函数的封装。

// 封装自定属性reject方法。
  static reject(value) {
    // 每次调用都是返回一个新的promise实例。
    return new XG((resolve, reject) => {
      // 判断传入进来的参数是不是一个prosmie，如果是调用它的then函数改变方法，否则直接成功状态返回。
      if (value instanceof XG) {
        value.then(resolve, reject)
      } else {
        // 改变当前的状态，并把传入进来的值抛出去
        reject(value)
      }
    })
  }

接下来是封装all()方法，promise中的all中是返回一个新的promise，在then()方法中进行获取实例值，这里有一点要注意的是，then() 中捕捉的状态必须统一，否则会进入第二个参数reason当中。

let p1 = new Promise(resolve => {
  resolve("p1-成功")
})
let p2 = new Promise((resolve, reject) => {
  resolve("p2-成功")
})
Promise.all([p1, p2]).then(res => {
  console.log(res)
})

在这里插入图片描述

接下来是我们的all方法封装。

// 封装自定属性all方法。
 static all(proArr) {
   // 创建resolve数组。
   const values = []
   // 返回一个新的promise实例
   return new XG((resolve, reject) => {
     proArr.forEach(item => {
       item.then(res => {
         // 把当前所有resolve状态下添加进去
         values.push(res)
         // 判断resolve数组添加进来的数量是不是等于传入进来的数量，等于的话，全部resolve状态抛出。
         if (values.length == proArr.length) {
           resolve(values)
         }
         // 如果传入近来有一个reject状态，就会reject状态抛出
       }, resaon => {
         reject(resaon)
       })
     })
   })
 }

let p1 = new XG(resolve => {
  resolve("p1-成功")
})
let p2 = new XG((resolve, reject) => {
  reject("p2-失败")
})
XG.all([p1, p2]).then(res => {
  console.log(res)
}, reason => {
  console.log(reason);
})

在这里插入图片描述

接下来是对race（）函数封装，原生的race方法是对异步传入进来的promise状态，耗时最短的promise优先抛出，后续不在执行。

let p1 = new Promise(resolve => {
  setTimeout(() => {
    resolve("p1-成功")
  }, 1000);
})
let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("p2-失败")
  }, 100);
})
Promise.race([p1, p2]).then(res => {
  console.log(res)
}, reason => {
  console.log("reject:" + reason);
})

在这里插入图片描述

搞清楚race()的特性，接下来使我们的race（）函数的封装。

 // 封装自定属性race方法。
 static race(proArr) {
   // 返回一个新的promise实例
   return new XG((resolve, reject) => {
     proArr.forEach(item => {
       item.then(res => {
           // 成功状态抛出
           resolve(res)
       }, resaon => {
         // 失败状态抛出
         reject(resaon)
       })
     })
   })
 }

let p1 = new XG(resolve => {
  setTimeout(() => {
    resolve("p1-成功")
  }, 1000);
})
let p2 = new XG((resolve, reject) => {
  setTimeout(() => {
    reject("p2-失败")
  }, 2000);
})
XG.race([p1, p2]).then(res => {
  console.log(res)
}, reason => {
  console.log("reject:" + reason);
})

在这里插入图片描述

有对promise底层感兴趣的朋友可以去 后盾人promise学习手册 进行学习。
项目地址 https://github.com/xiaoguo66/promise

Altaird
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
promise理解和封装
xiaomingzi_12345的博客
06-28 723
Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8），但是它们是基于promise的)，从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果。
JavaScript异步回调的Promise模式封装实例
10-25
在提供的示例中，`showMsg`函数被封装为一个Promise，当延迟操作完成时，`promise.resolve('done')`将Promise状态设置为fulfilled，并传递数据给`.then()`中的回调函数。 对于AJAX请求，EasyJS直接将`E.ajax()`方法...
Promise自定义封装
Youle-Rose记录一些学习前端的知识和遇到的难点
01-31 2109
自己封装一次promise会有利于理解promise，而且在面试的时候，很大可能回问道关于promise的一些知识，甚至会手写
promise自定义封装（手写promise）源码
最新发布
weixin_56048772的博客
05-23 524
实现以下结构的promise自定义封装。
封装一个promise
weixin_42602241的博客
02-10 90
以下是一个简单的 JavaScript 中封装一个 Promise 的示例： // 定义一个 myPromise 函数，它接受一个 callback 函数作为参数 function myPromise(callback) { return new Promise(callback); } // 使用 myPromise myPromise((resolve, reject) => ...
Promise封装方式
scorpio的博客
09-25 3427
Promise封装方法
自己封装一个Promise详解，手撕Promise
XuZhiqiang的博客
01-30 638
Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一,本文详细介绍了如何手写一个Promise，即手撕Promise，主要封装了Promise的then、catch、resolve、reject、all、race方法
围绕setTimeout的一个微型28字节Promise封装
08-10
总的来说，这个28字节的Promise封装是JavaScript异步编程的一个小巧示例，它体现了Promise的核心功能，且适用于轻量级的异步需求。在CSS相关的开发任务中，这样的工具可以帮助开发者更好地管理代码的执行时机，提高...
微信小程序网络层封装的实现（promise, 登录锁）
10-17
本文将详细介绍如何实现微信小程序的网络层封装，特别是结合Promise和登录锁的策略。 首先，我们要解决的是微信小程序原生`request`方法的不足。微信小程序的`request`方法采用回调函数的方式处理异步请求，这在...
ajax封装实例代码
11-04
在实际开发中，我们还可以进一步优化，例如添加错误处理、支持更多类型的请求头、支持Promise等，以适应不同场景的需求。Ajax封装实例代码的目的是提高代码的可读性和可维护性，使得开发更为高效。了解并熟练掌握...
详解vue axios二次封装
10-18
Vue Axios 二次封装是...总的来说，Vue Axios 二次封装的核心目的是使请求更加规范、易于管理，减少代码冗余，并提供统一的错误处理机制。通过以上步骤，可以创建一个符合项目需求的自定义 Axios 实例，提升开发体验。
使用Promise封装的微信小程序网络请求库
08-10
在"使用Promise封装的微信小程序网络请求库"中，我们可以预见到以下核心功能： 1. **创建Promise实例**：封装`wx.request()`，返回一个Promise对象，使得在网络请求成功或失败时，可以通过`.then()`和`.catch()`...
Javascript中的神器——Promise
10-20
Promise对象的核心特性在于其状态的不可变性。一旦状态从Pending变为Resolved或Rejected，就不可能再回到Pending。这种特性确保了结果的一致性和可预测性。通过`.then()`和`.catch()`方法，我们可以分别处理成功的...
异步JavaScript编程中的Promise使用方法
10-23
3. **模块化**：Promise的封装性使得异步操作可以更容易地被封装为独立的模块，便于复用和测试。 4. **更易读的代码**：Promise的链式调用和错误处理方式使代码逻辑更清晰，更易于理解和维护。 综上所述，Promise是...
微信小程序学习用完整demo：对wx接口的promise封装
03-15
这个"微信小程序学习用完整demo：对wx接口的promise封装"是一个针对初学者和进阶开发者的学习资源，旨在帮助他们更好地理解和掌握微信小程序的开发技术，特别是关于异步处理的优化。 微信小程序的开发涉及的主要...
国内外 JavaScript 经典封装
10-20
JavaScript，作为一种广泛应用于Web开发的脚本语言，已经成为现代网页和应用程序的核心技术。"国内外 JavaScript 经典封装" 涵盖了JavaScript编程中的各种高效、实用的代码封装技巧和库，这些技巧和库大大提高了开发...
promise封装常用方法
u014105655的博客
09-07 3971
promise封装常用方法 1.timeout方法 function timeout(delay = 1000) { return new Promise(resolve => setTimeout(resolve, delay)); } timeout(2000) .then(() => { console.log("houdunren.com"); return timeout(2000); })
promise 的理解 以及用 promise 封装一个异步请求方法
y050226的博客
07-11 709
当异步操作完成时，可以通过resolve函数将Promise状态从pending变为fulfilled，并传递异步操作的结果；而在异步操作失败时，可以通过reject函数将Promise状态从pending变为rejected，并传递失败的原因。它代表了一个异步操作的最终完成或失败，并可以获取其结果。使用Promise可以更方便地管理异步代码，避免了回调地狱（callback hell）的问题，使代码更易读、可维护。通过使用 Promise 封装异步请求方法，可以以更简洁的方式处理异步操作并进行错误处理。
一步步实现Promise代码封装
YaoDeBiAn的博客
12-03 1514
知乎文章地址：https://zhuanlan.zhihu.com/p/51373575 ES6中加入了Promise的一个概念，使得非阻塞式语句的同步变得简单起来，但是具体它是怎样实现的，接下来一步步地实现它。 一.Promise基本结构 new Promise((resolve, reject) =&gt; { setTimeout(() =&gt; { resolve('...
promise和future
05-25
Promise和Future都是用于异步编程的概念，用于处理函数的返回结果或异常情况。它们的主要区别在于，Promise是一种在JavaScript中实现的异步编程模型，而Future是一种在C++中实现的异步编程模型。 在JavaScript中，Promise是一种封装了异步操作结果的对象。Promise对象有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已拒绝）。Promise的核心方法是then()，它可以处理Promise对象的成功和失败情况。 在C++中，Future是一种封装了异步操作结果的对象。Future对象也有三种状态：ready（准备就绪）、deferred（延迟执行）和uninitialized（未初始化）。Future的核心方法是get()，它可以获取Future对象的值。 虽然Promise和Future都用于异步编程，但是它们在实现上有一些区别。Promise是基于回调函数的机制实现的，而Future则是基于线程的机制实现的。因此，在使用Promise和Future时需要注意它们的实现方式和特点，以便正确地处理异步操作结果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值