Promise 实现 then的链式调用

const resolvePromise = (promise2, result, resolve, reject) => {
  let consumed = false;
  let thenable;
  // 判断 result是否是Promise实例 
  if (result instanceof Promise) {
    if (result.status == "pending") {
      return result.then(function (data) {
        resolvePromise(promise2, data, resolve, reject);
      }, reject);
    } else {
      result.then(resolve, reject);
    }
    return;
  }
  // 判断result 是否是函数或者对象
  let isComplexResult = (target) =>
    (typeof target === "function" || typeof target === "object") &&
    target !== null;
   // 判断返回的是疑似Promise类型
  if (isComplexResult(result)) {
    try {
      thenable = result.then;
      // 判断返回值是否是promise类型
      if (typeof thenable === "function") {
        thenable.call(
          result,
          function (data) {
            if (consumed) return;
            consumed = true;
            return resolvePromise(promise2, data, resolve, reject);
          },
          function (error) {
            if (consumed) return;
            consumed = true;
            return reject(error);
          }
        );
      } else {
      // 普通值
        resolve(result);
      }
    } catch (e) {
      if (consumed) return;
      consumed = true;
      return reject(e);
    }
  } else {
   // 普通值
    resolve(result);
  }
};
Promise.prototype.then = function (onFulfilled, onRejected) {
  onFulfilled =
    typeof onFulfilled == "function" ? onFulfilled : (value) => value;
  onRejected =
    typeof onRejected == "function"
      ? onRejected
      : (reason) => {
          throw reason;
        };
  let self = this;
  let promise2;
  // promise状态是fulfilled
  if (self.status == "fulfilled") {
    return (promise2 = new Promise((resolve, reject) => {
      setTimeout(function () {
        try {
          let result = onFulfilled(self.value);
          resolvePromise(promise2, result, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
    }));
  }
  //promise状态是rejected
  if (self.status == "rejected") {
    return (promise2 = new Promise((resolve, reject) => {
      setTimeout(function () {
        try {
          let result = onRejected(self.value);
          resolvePromise(promise2, result, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
    }));
  }
  //promise状态是pending
  if (self.status == "pending") {
   // 链式调用 返回一个Promise实例
    return (promise2 = new Promise((resolve, reject) => {
    
      self.OnFunctionArrayFuill.push(() => {
        try {
          // 新的promise的resolve的值是onFulfilled处理后的值
          let result = onFulfilled(self.value);
          resolvePromise(promise2, result, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });

      self.OnFunctionArrayError.push(() => {
        try {
        // 新的promise的onRejected的值是onFulfilled处理后的值
          let result = onRejected(self.reason);
          // 处理result是普通的值或者Promise实例
          resolvePromise(promise2, result, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
    }));
  }
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6(ECMAScript 2015)引入了Promise对象,它是一种异步编程的解决方案。当一个异步操作完成后,Promise对象会返回一个代表操作结果的值,而不是像传统方那样使用回调函数。 Promise对象的then方法用于指定操作成功和失败时的回调函数。而且可以将then方法连续使用,形成链调用。当一个Promise对象的then方法返回另一个Promise对象时,后续的then方法都会等待该Promise对象的状态改变。 链调用的好处在于减少了回调函数嵌套的层数,提高了代码的可读性和可维护性。通过then方法的链调用,可以构建一串异步操作,使得代码逻辑更加清晰。 例如: ``` function getJSON(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(JSON.parse(xhr.responseText)); } else { reject(new Error('Unable to fetch data')); } } }; xhr.send(); }); } getJSON('/data/user.json') .then(user => { return getJSON(`/data/profile/${user.id}.json`); }) .then(profile => { console.log(profile); }) .catch(error => { console.error(error); }); ``` 上述代码展示了一个获取用户信息和个人资料的异步操作,其中getJSON函数返回一个Promise对象。通过then方法的链调用,可以先获取用户信息,然后再获取个人资料。如果有任何一个异步操作失败,则会进入catch回调函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值