10. 手写Promise

本文详细介绍了JavaScript中MyPromise类的构造、状态管理、回调函数执行以及链式调用的方法,包括`fulfilled`、`rejected`和处理异步操作的`microtask`机制。
摘要由CSDN通过智能技术生成
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  #state = PENDING // 私有属性
  #result = undefined
  #handlers = []

  constructor(executor) {
    const resolve = (data) => {
      this.#changeState(FULFILLED, data)
    }
    const reject = (reason) => {
      this.#changeState(REJECTED, reason)
    }
    try {
      executor(resolve, reject)
    } catch (err) {
      // 只能捕获同步错误
      reject(err)
    }
  }
  #changeState(state, result) {
    if (this.#state !== PENDING) return
    this.#state = state
    this.#result = result
    this.#run()
  }
  #runMicroTask(func) {
    if (typeof process === 'object' && typeof process.nextTick === 'function') {
      process.nextTick(func)
    } else if (typeof MutationObserver === 'function') {
      const ob = new MutationObserver(func)
      const textNode = document.createTextNode('1')
      ob.observe(textNode, {
        characterData: true,
      })
      textNode.data = 2
    } else {
      setTimeout(func, 0)
    }
  }
  #isPromiseLike(value) {
    if (value !== null && (typeof value === 'object' || typeof value === 'function')) {
      return typeof value.then === 'function'
    }
    return false
  }
  #runOne(callback, resolve, reject) {
    this.#runMicroTask(() => {
      if (typeof callback !== 'function') {
        const settled = this.#state === FULFILLED ? resolve : reject
        settled(this.#result)
      }
      try {
        const data = callback(this.#result)
        if (this.#isPromiseLike(data)) {
          data.then(resolve, reject)
        } else {
          resolve(data)
        }
      } catch (err) {
        reject(err)
      }
    })
  }
  #run() {
    if (this.#state === PENDING) return
    while (this.#handlers.length) {
      // shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值
      const { onFulfilled, onRejected, resolve, reject } = this.#handlers.shift()
      if (this.#state === FULFILLED) {
        this.#runOne(onFulfilled, resolve, reject)
      } else {
        this.#runOne(onRejected, resolve, reject)
      }
    }
  }
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      this.#handlers.push({
        onFulfilled,
        onRejected,
        resolve,
        reject,
      })
      this.#run()
    })
  }
  catch(onRejected) {
    return this.then(undefined, onRejected)
  }
  finally(onFinally) {
    return this.then(
      (data) => {
        onFinally()
        return data
      },
      (reason) => {
        onFinally()
        throw err
      }
    )
  }
  static resolve(value) {
    if (value instanceof MyPromise) return value
    let _resolve, _reject
    const p = new MyPromise((resolve, reject) => {
      _resolve = resolve
      _reject = reject
    })
    if (p.#isPromiseLike(value)) {
      value.then(_resolve, _reject)
    } else {
      _resolve(value)
    }
  }
  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason)
    })
  }
}
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Promise.all是一个方法,它接收一个promise对象组成的数组作为参数,当数组中所有的promise对象都变为fulfilled状态时,Promise.all返回一个新的promise对象,其状态为fulfilled,并将所有promise对象的结果组成一个数组作为该promise对象的结果。当数组中有一个promise对象变为rejected状态时,Promise.all返回一个新的promise对象,其状态为rejected,并将第一个被rejected的promise对象的结果作为该promise对象的结果。下面是一个使用Promise.all的例子: ```javascript const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then(values => { console.log(values); // [1, 2, 3] }); ``` Promise的实现需要遵循Promise/A+规范,主要包括以下几个部分: 1. Promise构造函数:接收一个executor函数作为参数,executor函数接收两个函数参数resolve和reject,分别表示promise对象的状态变为fulfilled和rejected时的回调函数。 2. then方法:接收两个函数参数onFulfilled和onRejected,分别表示promise对象的状态变为fulfilled和rejected时的回调函数。then方法返回一个新的promise对象。 3. resolve方法:接收一个参数value,如果value是一个promise对象,则返回该promise对象;否则返回一个新的promise对象,其状态为fulfilled,并将value作为该promise对象的结果。 4. reject方法:接收一个参数reason,返回一个新的promise对象,其状态为rejected,并将reason作为该promise对象的结果。 下面是一个简单的Promise的实现: ```javascript class MyPromise { constructor(executor) { this.status = 'pending'; this.value = undefined; this.reason = undefined; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; const resolve = value => { if (this.status === 'pending') { this.status = 'fulfilled'; this.value = value; this.onFulfilledCallbacks.forEach(callback => callback(this.value)); } }; const reject = reason => { if (this.status === 'pending') { this.status = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach(callback => callback(this.reason)); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value; onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }; const promise2 = new MyPromise((resolve, reject) => { if (this.status === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } else if (this.status === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } else { this.onFulfilledCallbacks.push(value => { setTimeout(() => { try { const x = onFulfilled(value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); this.onRejectedCallbacks.push(reason => { setTimeout(() => { try { const x = onRejected(reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); } }); return promise2; } resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { reject(new TypeError('Chaining cycle detected for promise')); } let called = false; if (x !== null && (typeof x === 'object' || typeof x === 'function')) { try { const then = x.then; if (typeof then === 'function') { then.call(x, y => { if (called) return; called = true; this.resolvePromise(promise2, y, resolve, reject); }, r => { if (called) return; called = true; reject(r); }); } else { resolve(x); } } catch (error) { if (called) return; called = true; reject(error); } } else { resolve(x); } } static resolve(value) { if (value instanceof MyPromise) { return value; } return new MyPromise(resolve => resolve(value)); } static reject(reason) { return new MyPromise((resolve, reject) => reject(reason)); } static all(promises) { return new MyPromise((resolve, reject) => { const results = []; let count = 0; promises.forEach((promise, index) => { MyPromise.resolve(promise).then(value => { results[index] = value; count++; if (count === promises.length) { resolve(results); } }, reason => { reject(reason); }); }); }); } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值