封装自己的Promise

最新推荐文章于 2024-05-23 11:18:33 发布

岑静无妄

最新推荐文章于 2024-05-23 11:18:33 发布

阅读量893

点赞数 14

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44813858/article/details/136242035

版权

Promise

一、Promise是什么

Promise 是 JavaScript 异步编程的一种解决方案，比传统的 callback 更加优雅、易读。

Promise 对象代表一个异步操作的结果。它有三种状态：pending（进行中）、fulfilled（已完成，又称 resolved）和 rejected（已失败）。当状态改变时，会触发相应的回调函数。

Promise 对象有以下两个特点：

对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已完成，又称 resolved）和 rejected（已失败）。只有异步操作的结果，可以改变 Promise 对象的状态。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise 的基本用法是，构造函数接受一个函数作为参数，该函数接受两个参数，分别是 resolve 和 reject，它们是两个函数，用来改变 Promise 对象的状态。

let promise = new Promise(function(resolve, reject) {
   
  // 异步操作
  setTimeout(function() {
   
    if (/* 异步操作成功 */) {
   
      resolve(value);
    } else {
   
      reject(error);
    }
  }, 1000);
});

在这个例子中，Promise 构造函数接受一个函数作为参数，这个函数立即执行，接受两个参数，分别是 resolve 和 reject。异步操作成功时，调用 resolve 函数，传入异步操作的结果；异步操作失败时，调用 reject 函数，传入错误对象。

然后，可以在 then 方法中，指定回调函数，处理异步操作的结果。如果异步操作成功，resolve 函数的结果会被传递给 then 方法的第一个参数；如果异步操作失败，reject 函数的结果会被传递给 then 方法的第二个参数。

二、Promise的功能和应用场景

Promise 的主要功能包括：

改善异步编程的流程控制：Promise 提供了一种更优雅的方式来处理异步操作，避免了回调地狱的问题。
错误处理：Promise 提供了更好的错误处理方式，可以使用 catch 方法来捕获错误。
提供了一种链式调用的方式：Promise 的 then 方法返回一个新的 Promise 实例，这样就可以进行链式调用。

Promise常见的方法：

实例方法：

then()：这个方法用于注册成功和失败的回调函数。当Promise的状态变为fulfilled时，成功的回调函数会被调用；当Promise的状态变为rejected时，失败的回调函数会被调用。

catch()：这个方法用于捕获错误。当Promise的状态变为rejected时，catch方法的回调函数会被调用。

finally()：这个方法无论Promise的状态如何，都会被调用。它通常用于清理工作。

静态方法：

resolve()：这个方法用于将Promise的状态变为fulfilled。

reject()：这个方法用于将Promise的状态变为rejected。

all()：这个方法用于处理多个Promise。只有当所有的Promise都变为fulfilled时，Promise.all返回的Promise的状态才会变为fulfilled。

race()：这个方法用于处理多个Promise。只要有一个Promise的状态变为fulfilled或rejected，Promise.race返回的Promise的状态就会变为相应的状态。

allSettled()：这个方法返回一个新的Promise实例，该实例在所有给定的Promise实例都解决或拒绝后解决。与Promise.all不同的是，Promise.allSettled会等待所有的Promise实例都完成，无论它们是解决还是拒绝。返回的结果是一个数组，数组中的每个元素都是一个对象，表示每个Promise实例的结果。

any()：这个方法返回一个新的Promise实例，该实例在给定的Promise实例中的任何一个解决时解决。如果所有的Promise实例都拒绝，那么这个新的Promise实例也会拒绝。返回的结果是第一个解决的Promise实例的结果。

Promise 的应用场景包括：

AJAX 请求：在进行 AJAX 请求时，我们通常会使用 Promise 来处理异步操作。
文件操作：在进行文件操作时，由于涉及到读写文件，因此也需要使用 Promise 来处理异步操作。
浏览器的异步操作：例如定时器、事件监听等，都可以使用 Promise 来处理。
Node.js 中的异步操作：Node.js 中的 fs 模块、http 模块等，都提供了 Promise 版本的 API。

总的来说，Promise 是 JavaScript 中处理异步操作的一种重要方式，它的出现大大提高了异步编程的便利性和可读性。

三、封装一个Promise

封装一个Promise，我们先想一下它需要的核心功能：

1.支持new操作，需要创建构造函数

2.Promise有三个状态，pending,fulfilled,rejected,并且状态只能有以下两种改变：pending->fulfilled，pending->rejected

3.支持then方法，并且有成功和失败回调，并且then支持多次调用，支持异步，支持链式调用

针对以上步骤，封装的Promise和各种方法如下：

// 通过变量保存状态
const Pending = "pending"
const Fulfilled = "fulfilled"
const Rejected = "rejected"

/**
 * @description 执行异步任务
 * @param callback
 *
 */
function asyncTaskRun(callback) {
   
    if(typeof queueMicrotask === 'function'){
   
        queueMicrotask(callback)
    }else if(typeof MutationObserver === 'function'){
   
        const obs = new MutationObserver(() => {
   callback()})
        const div = document.createElement('div')
        obs.observe(div,{
   childList:true})
        div.innerText = 'hello'
    }else{
   
        setTimeout(callback,0)
    }
}

/**
 * @description: 处理then返回的结果
 * @param res：then方法内部resolve/reject返回的结果
 * @param p：then方法返回的Promise
 * @param resolve：then方法返回的Promise的resolve
 * @param reject：then方法返回的Promise的resolve
 */
function resolvePromise(res,p,resolve,reject) {
   
    if(res instanceof MyPromise){
   
        if(res === p){
   
            throw new TypeError</