JavaScript实现手写promise的示例代码

下面是详细讲解“JavaScript实现手写promise的示例代码”的完整攻略。

理解promise

在讲解如何手写promise之前，我们先来理解一下promise，它是一个用来处理异步操作的对象。在promise中，一个异步操作被包装成一个状态机对象，该状态机由三个状态组成——pending（等待中）、fulfilled（完成）、rejected（拒绝）。它提供了then()和catch()方法，分别用来处理异步操作成功和失败的结果。

手写promise

以下是手写promise的示例代码：

class MyPromise {
  constructor(fn) {
    this.pipeline = []
    this.handleError = () => {}

    const resolve = (val) => {
      let next = Promise.resolve(val)
      this.pipeline.forEach(handler => {
        next = next.then(handler)
      })
    }

    const reject = (err) => {
      this.handleError(err)
    }

    fn(resolve, reject)
  }

  then(callback) {
    this.pipeline.push(callback)
    return this
  }

  catch(callback) {
    this.handleError = callback
    return this
  }

  static resolve(val) {
    return new MyPromise((resolve) => {
      resolve(val)
    })
  }

  static reject(err) {
    return new MyPromise((resolve, reject) => {
      reject(err)
    })
  }
}

接下来我们来逐个解释这份手写的promise代码：

1. 定义了一个MyPromise类，该类接收一个函数fn作为参数。
2. 在构造函数中，我们定义了一个数组pipeline和一个错误处理函数handleError，并接收到了两个构造参数——resolve和reject。
3. resolve方法会创建一个返回一个新的promise的链式调用，而reject方法会调用我们自定义的错误处理函数handleError。
4. 在调用fn函数时，将resolve和reject函数传入，从而实现promise状态的改变。
5. 接下来，我们定义了两个方法then和catch，分别用来处理成功的结果和失败的结果。它们都返回this，也就是一个MyPromise对象，以支持链式调用。
6. 最后，我们定义了resolve和reject方法用来返回一个新的MyPromise对象。在resolve方法中，我们直接调用了resolve方法，而在reject方法中，则是调用了reject方法。

示例

以下是两个手写promise的示例：

示例一

function success() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('success')
    }, 2000)
  })
}

function fail() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('fail'))
    }, 2000)
  })
}

success()
  .then(res => console.log(res))
  .catch(err => console.error(err))

fail()
  .then(res => console.log(res))
  .catch(err => console.error(err))

以上代码中，我们定义了两个函数success和fail，分别返回resolve和reject状态的MyPromise对象。接着，我们分别调用success和fail方法，并通过then方法和catch方法来处理它们的结果。

示例二

function test() {
  MyPromise.resolve('test')
    .then(res => {
      console.log(res)
      return res.toUpperCase()
    })
    .then(res => console.log(res))
}

test()

以上代码中，我们定义了一个test方法，其中调用了MyPromise.resolve方法，并通过then方法传入一个处理函数。在该处理函数中，我们将结果处理为大写字符，并通过另一个then方法输出结果。

希望以上的讲解可以帮助你理解Javascript手写promise的示例代码。