手写promis（2）-- 链式编程篇

最新推荐文章于 2024-08-30 14:31:36 发布
最新推荐文章于 2024-08-30 14:31:36 发布
阅读量127 收藏
点赞数
分类专栏： promise 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63358859/article/details/134532780
版权

目录

链式编程 处理异常 和普通内容

链式编程---处理返回promise

链式编程---处理重复引用

链式编程--rejected 

链式编程--处理padding状态

链式编程 处理异常 和普通内容

  • 1.返回promise实例：在原本then方法里边创建新promise
  • 2.获取返回值：把原本的then的逻辑迁移到新promise中 是同步执行的不受影响（方便传递给新创建的promise）
  • 3.处理返回值 调用新promise的 resolve 
  • 4.处理异常 try catch 捕获异常 调用新promise的 reject

function runAsyncTask(callback) {
  if (typeof queueMicrotask === "function") {
    queueMicrotask(callback);
  } else if (typeof MutationObserver == "function") {
    const obs = new MutationObserver(callback);
    const divNode = document.createElement("div");
    obs.observe(divNode, { childList: true });
    divNode.innerHTML = "贾公子";
  } else {
    setTimeout(callback, 0);
  }
}

/**链式编程 处理异常 和普通内容
 *   1.返回promise实例
 *   2.获取返回值
 *    2.1处理返回值
 *    2.2处理异常
 *
 *
 */
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

class MyPromise {
  state = PENDING;
  result = undefined;
  #handlers = [];
  constructor(func) {
    const resolve = (result) => {
      if (this.state == PENDING) {
        this.state = FULFILLED;
        this.result = result;
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result);
        });
      }
    };

    const reject = (result) => {
      if (this.state == PENDING) {
        this.state = REJECTED;
        this.result = result;
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result);
        });
      }
    };

    func(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (x) => x;

    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (x) => {
            throw x;
          };
    //  1.返回promise实例
    const p2 = new MyPromise((resolve, reject) => {
      if (this.state === FULFILLED) {
        runAsyncTask(() => {
          try {
            // 2.获取返回值
            const x = onFulfilled(this.result);
            // 2.1处理返回值
            resolve(x);
            // 2.2处理异常
          } catch (error) {
            reject(error);
          }
        });
      } else if (this.state === REJECTED) {
        runAsyncTask(() => {
          onRejected(this.result);
        });
      } else if (this.state === PENDING) {
        this.#handlers.push({
          onFulfilled: () => {
            runAsyncTask(() => {
              onFulfilled(this.result);
            });
          },
          onRejected: () => {
            runAsyncTask(() => {
              onRejected(this.result);
            });
          },
        });
      }
    });

    return p2;
  }
}

// 测试代码

const p = new MyPromise((resolve, reject) => {
  resolve("1");
  // reject("error");
});
p.then((result) => {
  console.log("p1", result);
  throw new Error("异常");
  // return 2;
}).then(
  (result) => {
    console.log("p2", result);
  },
  (err) => {
    console.log("p2", err);
  }
);

链式编程---处理返回promise

1.使用 instanceof判断返回值是否为 MyPromise实例

2.如果是代表传递的返回值是promise 调用传递的promise的then方法

3.在成功回调中调用resolve，失败回调中传递reject，把结果传递

function runAsyncTask(callback) {
  if (typeof queueMicrotask === "function") {
    queueMicrotask(callback);
  } else if (typeof MutationObserver == "function") {
    const obs = new MutationObserver(callback);
    const divNode = document.createElement("div");
    obs.observe(divNode, { childList: true });
    divNode.innerHTML = "贾公子";
  } else {
    setTimeout(callback, 0);
  }
}

/**
 *
 */
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

class MyPromise {
  state = PENDING;
  result = undefined;
  #handlers = [];
  constructor(func) {
    const resolve = (result) => {
      if (this.state == PENDING) {
        this.state = FULFILLED;
        this.result = result;
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result);
        });
      }
    };

    const reject = (result) => {
      if (this.state == PENDING) {
        this.state = REJECTED;
        this.result = result;
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result);
        });
      }
    };

    func(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (x) => x;

    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (x) => {
            throw x;
          };
    const p2 = new MyPromise((resolve, reject) => {
      if (this.state === FULFILLED) {
        runAsyncTask(() => {
          try {
            const x = onFulfilled(this.result);
            // 1.处理返回promise
            if (x instanceof MyPromise) {
              // 2.调用then方法
              x.then(
                (res) => {
                  resolve(res);
                },
                (err) => {
                  reject(err);
                }
              );
            } else {
              resolve(x);
            }
          } catch (error) {
            reject(error);
          }
        });
      } else if (this.state === REJECTED) {
        runAsyncTask(() => {
          onRejected(this.result);
        });
      } else if (this.state === PENDING) {
        this.#handlers.push({
          onFulfilled: () => {
            runAsyncTask(() => {
              onFulfilled(this.result);
            });
          },
          onRejected: () => {
            runAsyncTask(() => {
              onRejected(this.result);
            });
          },
        });
      }
    });

    return p2;
  }
}

// 测试代码

const p = new MyPromise((resolve, reject) => {
  resolve("1");
});
p.then((result) => {
  return new MyPromise((resolve, reject) => {
    resolve(2);
    // reject("err");
  });
}).then(
  (result) => {
    console.log("p2", result);
  },
  (err) => {
    console.log("p2", err);
  }
);

链式编程---处理重复引用

在then的回调函数中直接把then的结果返回了会抛出重复引用的问题

1.x就是then回调函数的返回值，then方法返回的promise就是p2

2.比较x跟p2是否全等 是就抛出异常 

function runAsyncTask(callback) {
  if (typeof queueMicrotask === "function") {
    queueMicrotask(callback);
  } else if (typeof MutationObserver == "function") {
    const obs = new MutationObserver(callback);
    const divNode = document.createElement("div");
    obs.observe(divNode, { childList: true });
    divNode.innerHTML = "贾公子";
  } else {
    setTimeout(callback, 0);
  }
}

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

class MyPromise {
  state = PENDING;
  result = undefined;
  #handlers = [];
  constructor(func) {
    const resolve = (result) => {
      if (this.state == PENDING) {
        this.state = FULFILLED;
        this.result = result;
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result);
        });
      }
    };

    const reject = (result) => {
      if (this.state == PENDING) {
        this.state = REJECTED;
        this.result = result;
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result);
        });
      }
    };

    func(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (x) => x;

    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (x) => {
            throw x;
          };
    const p2 = new MyPromise((resolve, reject) => {
      if (this.state === FULFILLED) {
        runAsyncTask(() => {
          try {
            const x = onFulfilled(this.result);
            // 1.处理重复的引用
            if (x === p2) {
              console.log("----");
              throw new TypeError(
                "Chaining cycle detected for promise #<Promise>"
              );
            }
            if (x instanceof MyPromise) {
              x.then(
                (res) => {
                  resolve(res);
                },
                (err) => {
                  reject(err);
                }
              );
            } else {
              resolve(x);
            }
          } catch (error) {
            reject(error);
          }
        });
      } else if (this.state === REJECTED) {
        runAsyncTask(() => {
          onRejected(this.result);
        });
      } else if (this.state === PENDING) {
        this.#handlers.push({
          onFulfilled: () => {
            runAsyncTask(() => {
              onFulfilled(this.result);
            });
          },
          onRejected: () => {
            runAsyncTask(() => {
              onRejected(this.result);
            });
          },
        });
      }
    });

    return p2;
  }
}

// 测试代码

const p = new MyPromise((resolve, reject) => {
  resolve("1");
});
const p2 = p.then((res) => {
  return p2;
});
p2.then(
  (res) => {},
  (err) => {
    console.log(err);
  }
);

链式编程--rejected 

完成链式第一步要返回promise 处理Fulfilled时候已完成

通过trycatch 处理异常

抽离函数 resolvePromise 处理 重复引用 以及返回promise的情况

调用函数测试状态

function runAsyncTask(callback) {
  if (typeof queueMicrotask === "function") {
    queueMicrotask(callback);
  } else if (typeof MutationObserver == "function") {
    const obs = new MutationObserver(callback);
    const divNode = document.createElement("div");
    obs.observe(divNode, { childList: true });
    divNode.innerHTML = "贾公子";
  } else {
    setTimeout(callback, 0);
  }
}

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

class MyPromise {
  state = PENDING;
  result = undefined;
  #handlers = [];
  constructor(func) {
    const resolve = (result) => {
      if (this.state == PENDING) {
        this.state = FULFILLED;
        this.result = result;
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result);
        });
      }
    };

    const reject = (result) => {
      if (this.state == PENDING) {
        this.state = REJECTED;
        this.result = result;
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result);
        });
      }
    };

    func(resolve, reject);
  }

  /**
   *处理异常
   */
  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (x) => x;

    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (x) => {
            throw x;
          };
    const p2 = new MyPromise((resolve, reject) => {
      if (this.state === FULFILLED) {
        runAsyncTask(() => {
          try {
            const x = onFulfilled(this.result);
            resolvePromise(p2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        });
      } else if (this.state === REJECTED) {
        // 1.处理异常
        runAsyncTask(() => {
          try {
            // 2.获取返回值
            const x = onRejected(this.result);
            // 4.调用函数
            resolvePromise(p2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        });
      } else if (this.state === PENDING) {
        this.#handlers.push({
          onFulfilled: () => {
            runAsyncTask(() => {
              onFulfilled(this.result);
            });
          },
          onRejected: () => {
            runAsyncTask(() => {
              onRejected(this.result);
            });
          },
        });
      }
    });

    return p2;
  }
}
// 3.抽取函数
function resolvePromise(p2, x, resolve, reject) {
  if (x === p2) {
    throw new TypeError("Chaining cycle detected for promise #<Promise>");
  }
  if (x instanceof MyPromise) {
    x.then(
      (res) => {
        resolve(res);
      },
      (err) => {
        reject(err);
      }
    );
  } else {
    resolve(x);
  }
}

// 测试代码

const p = new MyPromise((resolve, reject) => {
  reject("1");
});
const p2 = p.then(undefined, (err) => {
  // throw "error";
  // return p2;
  // return 2;
  return new MyPromise((resolve, reject) => {
    resolve("OK");
    reject("ERROR");
  });
});
p2.then(
  (res) => {
    console.log("p2--res", res);
  },
  (err) => {
    console.log("p2--err", err);
  }
);

链式编程--处理padding状态

PENDING状态要根据异步执行的结果存储到handlers数组中不同的函数（onFulfilled || onRejected）两个处理链式编程的逻辑完全一样

   * 处理异常 trycatch捕获异常

   * 获取返回值 获取第一个promise的返回值

   * 调用函数 处理 重复引用以及 返回promise的情况

function runAsyncTask(callback) {
  if (typeof queueMicrotask === "function") {
    queueMicrotask(callback);
  } else if (typeof MutationObserver == "function") {
    const obs = new MutationObserver(callback);
    const divNode = document.createElement("div");
    obs.observe(divNode, { childList: true });
    divNode.innerHTML = "贾公子";
  } else {
    setTimeout(callback, 0);
  }
}

function resolvePromise(p2, x, resolve, reject) {
  if (x === p2) {
    throw new TypeError("Chaining cycle detected for promise #<Promise>");
  }
  if (x instanceof MyPromise) {
    x.then(
      (res) => {
        resolve(res);
      },
      (err) => {
        reject(err);
      }
    );
  } else {
    resolve(x);
  }
}
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

class MyPromise {
  state = PENDING;
  result = undefined;
  #handlers = [];
  constructor(func) {
    const resolve = (result) => {
      if (this.state == PENDING) {
        this.state = FULFILLED;
        this.result = result;
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result);
        });
      }
    };

    const reject = (result) => {
      if (this.state == PENDING) {
        this.state = REJECTED;
        this.result = result;
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result);
        });
      }
    };

    func(resolve, reject);
  }
  /**
   * 处理异常
   * 获取返回值
   * 调用函数
   */
  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (x) => x;

    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (x) => {
            throw x;
          };
    const p2 = new MyPromise((resolve, reject) => {
      if (this.state === FULFILLED) {
        runAsyncTask(() => {
          try {
            const x = onFulfilled(this.result);
            resolvePromise(p2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        });
      } else if (this.state === REJECTED) {
        runAsyncTask(() => {
          try {
            const x = onRejected(this.result);

            resolvePromise(p2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        });
      } else if (this.state === PENDING) {
        this.#handlers.push({
          onFulfilled: () => {
            runAsyncTask(() => {
              // 处理异常
              try {
                // 获取返回值
                const x = onFulfilled(this.result);
                //  调用函数
                resolvePromise(p2, x, resolve, reject);
              } catch (error) {
                reject(error);
              }
            });
          },
          onRejected: () => {
            runAsyncTask(() => {
              // 处理异常
              try {
                // 获取返回值
                const x = onRejected(this.result);
                //  调用函数
                resolvePromise(p2, x, resolve, reject);
              } catch (error) {
                reject(error);
              }
            });
          },
        });
      }
    });

    return p2;
  }
}

// 测试代码

const p = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve("1");
  }, 2000);
});
const p2 = p.then((res) => {
  // throw "error";
  // return p2;
  // return 2;
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve("OK");
    }, 2000);
    // reject("ERROR");
  });
});
p2.then(
  (res) => {
    console.log("p2--res", res);
  },
  (err) => {
    console.log("p2--err", err);
  }
);

前端 贾公子
关注
专栏目录
详解Promise的链式写法
qq_45153972的博客
06-07 576
详细解释了Promise为什么可以用链式的写法，讲解了then，catch方法返回了什么
【Promise】入门-同步回调-异步回调-JS中的异常error处理-Promis的理解和使用-基本使用-链式调用-七个关键问题
YK菌的博客
02-27 8346
promise的使用与注意事项
前端学习（1323）:promise链式编程
歌谣的博客
06-02 229
const fs = require('fs'); /* fs.readFile('./1.txt', 'utf8', (err, result1) => { console.log(result1); fs.readFile('./2.txt', 'utf8', (err, result2) => { console.log(result2); fs.readFile('./3.txt', 'utf8', (err, result3) =&g.
JavaScript 知识：this、apply/call/bind、Promise、async/await、HTTP 库 Axios
最新发布
freeking101的博客
08-30 1305
JavaScript 知识：this、apply/call/bind、Promise、async/await、HTTP 库 Axios
promise链式操作
不想内卷的博客
08-11 508
promise用来封装异步操作并可以获得其成功和失败的结果，我们首先看看正常的Promise是怎么样的 //实例化对象 const p=new Promise(function (resolve,reject) { let data='数据库中的用户数据'; //原生ajax请求,没有接口就先不用这个了，但是我们可以这么李姐 // var xhr = new XMLHttpRequest(); // xh
promise 链式调用
weixin_39537579的博客
08-15 3944
一般遇到的promise使用方式很少接触到链式调用，今天看了些文章，故写了个例子来理解 链式操作一般的应用场景是后面的then需要前面的then（前面的then应该也是个异步操作，因为若不是异步操作，就可以将代码直接写在前一then里，不需要第二个then）的返回值，故前面的then也需要返回的是promise对象。 const p = new Promise((resolve, rejec...
链式编程艺术：探索 Promise 链的美妙之处
你若盛开，清风自来
07-06 190
Promise 是 JavaScript 中用于处理异步操作的对象。它可以表示一个异步操作的最终完成或失败，并可以返回操作结果或错误信息。Promise解决了传统回调函数嵌套过多导致的回调地狱问题。在过去，为了处理多个异步操作的依赖关系，开发者经常需要嵌套多个回调函数，这导致代码难以理解、维护困难，并可能引发错误。通过使用 Promise，开发者可以更优雅地处理异步操作。Promise 提供了一个链式调用的方式，允许按顺序组织和处理异步操作，使代码更具可读性和可维护性。
Bentley promis.e V8i (SELECTSeries 7) 08.11.12.101
12-04
2. run license patch - "try it now!.exe" (run as admin in Win7) 3. browse to the path containing the license file - "Bentley.liclib.dll" >> click "Try it now!" button >> done! 4. now your Bently ...
js代码-promis封装
07-16
在JavaScript的世界里，Promise是异步编程的一种解决方案，它提供了更好的错误处理机制和更优雅的代码组织方式。本文将深入探讨“js代码-Promise封装”的主题，解释Promise的基本概念、构造函数、状态转换以及如何...
详解ES6 Promise对象then方法链式调用
12-10
promise俗称链式调用，它是es6中最重要的特性之一 简单的说可以不停的then调用嵌套在调用（异步之后，链式调用方式执行回调），这种操作方式称为promise then()方法的作用是Promise实例添加解决（fulfillment）和拒绝（rejection）状态的回调函数。then()方法会返回一个新的Promise实例，所以then()方法后面可以继续跟另一个then()方法进行链式调用。 let p = new Promise((resolve, reject) => { setTimeout(resolve, 1000, 'success'); }); p.the
promise的链式用法详细
sqLeiQ的博客
12-04 7218
本文重点分析了promise的链式用法。 1 简介 本文介绍promise对象的then,catch,finally方法及链式用法。重点介绍了then的使用方式以及对链式调用的执行过程。 如果你对promise不是很了解，可以先查看 promise初级文章-在上一篇文章。 2 主要内容 •then的参数及执行逻辑•then的返回值•catch•finally•链式调用的逻辑 3 Promise实例的方法 在js中，对象会从它的构造器的原型对象中继承方法。例如： var arr ...
JavaScript异步编程——08-Promise的链式调用【万字长文，感谢支持】
——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…
05-11 1289
史诗级JavaScript异步编程学习，快来订阅专栏吧！
ES6笔记-Promise对象（入门-同步异步-Promise基本使用-链式调用-事件循环-面试案例）
qq_33290233的博客
04-05 1287
Promise对象 主要用于异步计算 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 可以在对象之间传递和操作promise，帮助我们处理队列 异步回调的问题： 之前处理异步是通过纯粹的回调函数的形式进行处理 很容易进入到回调地狱中，剥夺了函数return的能力 问题可以解决，但是难以读懂，维护困难 稍有不慎就会踏入回调地狱 - 嵌套层次深，不好维护 promise promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外） 并未剥夺函数return的能力，因此
图解 Promise 实现原理（二）—— Promise 链式调用
vivo互联网技术
04-23 3445
本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/Xz2bGaLxVL4xw1M2hb2nJQ 作者：Morrain 很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。 本系列文章有...
JavaScript（四）：遇见Promise
欧阳方超的专栏
09-06 209
在通过网络请求取得数据的场景中，生产者代码产生数据，消费者使用数据，而Promise就是将生产者代码与消费者代码连接在一个的JavaScript对象。
彻底掌握 Promise-原生Promise的实现(二) Promise的链式调用
记得抬头微笑
03-23 6004
在 彻底掌握 Promise- 原生 Promise 的实现(一)已经初步实现了 promise 的简易版本，这距离实现完整版本的 Promise 还有一段距离，下面我们将在简易版本的基础上增加 Promise 的链式调用 异步情况下 Promise 的链式调用 处理函数执行的异常情况 以下代码都是对简易版本 Promise 去实现的，所以这里只显示变更的地方，完整版本在文末贴出 Promise 的链式调用 下面我们依然还是通过逆解析的方式去通过 Promise 的链式调用的用法.....
07-Promise的链式调用
biancheng_的博客
12-11 1318
上面的代码中，每次在 return 一个 promise 的时候，只是 url 地址不一样，其他的代码是一样的。上面代码中，then 是可以链式调用的，一旦 return 一个新的 promise 实例之后，后面的 then 就可以拿到前面 resolve 出来的数据。换而言之，现在有三个网络请求，请求 2 必须依赖请求 1 的结果，请求 3 必须依赖请求 2 的结果，如果按照往常的写法，会有三层回调，会陷入“回调地狱”。这种代码要怎么写呢?上面的代码中，假设 a 请求失败，那么，后面的代码会怎么走呢？
PROMIS系统操作指南与故障解决
这篇技术文档涵盖了多个与生产流程自动化软件PROMIS相关的知识点，涉及配方变更、打印机异常处理、SCBLOT状态调整、PROMIS软件申请、打印LOT traveler以及LOT状态转换等实际操作。 A. 配方变更 在生产过程中，有时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值