JavaScript模拟实现Promise功能的示例代码

下面是“JavaScript模拟实现Promise功能的示例代码”的完整攻略。

什么是 Promise

Promise是 JavaScript 异步编程的一种解决方案，用于处理异步操作中的回调地狱问题，提高可维护性和可读性。它解决了回调函数多层嵌套的问题，通过链式调用的形式增加可读性，并通过 then方法捕获错误。

Promise 本质上是一个对象，从它可以获知异步操作的消息。在它的基础上，可以使用 async-await 等语法糖，使异步操作更加简洁优雅。

Promise 示例1

假设我们需要在请求服务器的过程中设置超时时间，如果请求超时，我们需要让请求失败。可以使用 Promise.race() 实现这个功能：

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('timeout')), ms)
  })
}

function request(url, options) {
  return Promise.race([
    fetch(url, options), // 请求服务器
    timeout(5000) // 设置超时时间为5s
  ])
}

// 使用示例
request('/api/data.json')
  .then(response => console.log(response))
  .catch(error => console.log(error))

上述代码通过 Promise.race() 静态方法，实现了一个 Promise 实例的竞赛机制。它返回一个新的 Promise 实例，该实例的状态取决于第一个完成的 Promise 实例的状态。如果超时时间内未完成请求，则回调 reject 方法，Promise 状态变为 rejected 状态，传递 new Error('timeout') 错误信息。

Promise 示例2

下面我们来自己模拟实现一个 Promise 类，该类包含两个实例方法 then() 和 catch()。then() 方法接受两个参数：成功的回调和失败的回调。catch() 方法只接受一个参数：失败的回调。我们先来实现一个 Promise 成功的例子：

class Promise {
  constructor(func) {
    this.status = 'pending'
    try {
      func(this.resolve.bind(this), this.reject.bind(this))
    } catch (error) {
      this.reject(error)
    }
  }

  resolve(data) {
    if (this.status !== 'pending') return
    this.status = 'resolved'
    this.data = data
    this.successCallback && this.successCallback(this.data)
  }

  reject(error) {
    if (this.status !== 'pending') return
    this.status = 'rejected'
    this.error = error
    this.failCallback && this.failCallback(this.error)
  }

  then(successCallback, failCallback) {
    if (this.status === 'resolved') {
      successCallback(this.data)
    } else if (this.status === 'rejected') {
      failCallback(this.error)
    } else {
      this.successCallback = successCallback
      this.failCallback = failCallback
    }
    return this
  }

  catch(failCallback) {
    if (this.status === 'rejected') {
      failCallback(this.error)
    } else {
      this.failCallback = failCallback
    }
    return this
  }
}

// 使用示例
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hello world')
  }, 2000)
})

promise.then(data => console.log(data))

上面的代码模拟实现了一个 Promise 示例，通过回调函数的形式实现了异步操作的逻辑。

首先，在 Promise 内部通过 this.status 属性来记录 Promise 实例的状态，初始状态为 pending。在 resolve() 方法中，如果状态为 pending，则将状态改为成功状态，并且传递成功时的数据。在 reject() 方法中也是同理，将状态改为失败状态，并且传递失败信息。

之后，我们实现了 then() 和 catch() 方法，如果 Promise 的状态已经确定，then() 和 catch() 方法将立即执行传入的回调函数，否则它们将存储在 successCallback 和 failCallback 中，等待 Promise 状态确定后执行。then() 方法返回一个新的 Promise 实例，因此可以实现链式调用。

最后，我们测试了这个 Promise 实例的成功回调，每隔两秒输出 hello world。

以上就是用 JavaScript 实现 Promise 的两个例子了。