彻底掌握 Promise - 原生 Promise.resolve 的实现(五)

---

前言

在 [\[ 彻底掌握 Promise - 原生 Promise.all 的实现(四)\]](https://blog.csdn.net/qq_40146638/article/details/123813571) 中我们已经实现了 Promise 的 all 方法，下面这篇文章，主要讲述 Promise.resolve 方法的实现。

resolve() 方法返回一个成功状态的 Promise，

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、resolve 的使用方法

语法

Promise.resolve(value);

参数

resolve 方法接收一个参数，这个参数可以是一个普通类型数据，也可以是一个 promise 对象

返回值

返回一个带着给定值解析过的 Promise 对象，如果参数本身就是一个 Promise 对象，则直接返回这个 Promise 对象。

---

示例1： 普通类型的调用

const promise1 = Promise.resolve(123);

promise1.then((value) => {
  console.log(value);
  // expected output: 123
});

示例1：执行结果

示例2： 传入一个 Promise 对象

const promise = new Promise((resolve, reject) => {
	resolve('示例2 --> promise对象')
})

const promise1 = Promise.resolve(promise);

promise1.then((value) => {
  console.log(value);
  // expected output: 示例2 --> promise对象
});

示例2：执行结果

二、实现原理

1. 在 resolve 判断当前传入参数是否为 Promsie 对象，是 Promise 的话， 直接返回这个参数
2. 如果是普通值的话，创建一个 Promise 对象，调用 promise 的 resolve 参数返回传入的值

三、具体实现

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

class iPromise {

  constructor(callback) {
    // 使用 try,catch 的方式进行函数执行的异常捕获, 放置代码的阻塞
    try {
      callback(this.resolve, this.reject)
    } catch (error) {
      this.reject(error)
    }
  }

  value = null
  status = PENDING
  reason = null
  fulfilledList = []
  rejectedList = []

  resolve = (value) => {
    if (this.status != PENDING) {
      return
    }
    this.status = FULFILLED
    this.value = value
    while (this.fulfilledList.length) {
      this.fulfilledList.shift()()
    }
  }

  reject = (reason) => {
    if (this.status != PENDING) {
      return
    }
    this.status = REJECTED
    this.reason = reason
    while (this.rejectedList.length) {
      this.rejectedList.shift()()
    }
  }

  then(successCallback, errorCallback) {
    successCallback = successCallback ? successCallback : value => value
    errorCallback = errorCallback ? errorCallback : reason => reason
    return new iPromise((resolve, reject) => {
      if (this.status == FULFILLED) {
        // 增加一个 setTimeout 的原因是把当前任务放到下一个宏任务里去执行
        // 因为处理异步可能会有问题
        setTimeout(() => {
          try {
            let result = successCallback(this.value)
            isiPromise(result, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
      } else if (this.status == REJECTED) {
        setTimeout(() => {
          try {
            let result = errorCallback(this.reason)
            isiPromise(result, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
      } else {
        this.fulfilledList.push(() => {
          setTimeout(() => {
            try {
              let result = successCallback(this.value)
              isiPromise(result, resolve, reject)
            } catch (error) {
              reject(error)
            }
          })
        })
        this.rejectedList.push(() => {
          setTimeout(() => {
            try {
              let result = errorCallback(this.reason)
              isiPromise(result, resolve, reject)
            } catch (error) {
              reject(error)
            }
          })
        })
      }
    })
  }

  static all(arr) {
    // 创建一个保存所有结果的list
    let resultList = []
    const len = arr.length
    let index = 0
    // 返回一个 Promise 对象，让外部可以调用 then 方法获取结果
    return new iPromise((resolve, reject) => {
      // 保存结果
      function addData(key, value) {
        resultList[key] = value
        index++
        if (index == len) {
          resolve(resultList)
        }
      }
      // 循环执行传入的回调函数获取返回结果
      for (let i = 0; i < len; i++) {
        // 判断当前项，是否为一个 Promise 对象, 如果是, 调用它的then方法获取返回结果
        if (arr[i] instanceof iPromise) {
          arr[i].then(value => addData(i, value), reason => reject(reason))
        } else {
          // 是普通对象的话, 直接返回结果
          addData(i, arr[i])
        }
      }
    })
  }
  static resolve(value) {
  // 判断当前传入对象是否为 Promise 对象
  // 是 --> 直接返回这个值
  // 否 --> 创建一个 Promise 对象调用 Promise 中的参数对象 resolve返回
    if (value instanceof iPromise) return value
    return new iPromise((resolve, reject) => {
      resolve(value)
    })
  }
}
function isiPromise(result, resolve, reject) {
  if (result instanceof iPromise) {
    result.then(resolve, reject)
  } else {
    resolve(result)
  }
}

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了 Promise.resolve静态方法的使用和实现，如有问题，敬请留言说明 ~

我们会逐步去实现 Promise 的其他静态方法
实现 Promise.finally 的静态方法
实现 Promise.catch 的静态方法