手写Promise

最新推荐文章于 2024-09-04 20:18:34 发布
最新推荐文章于 2024-09-04 20:18:34 发布
阅读量969 收藏 14
点赞数 29
分类专栏： 前端面试 手写系列 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuchao0704/article/details/139554739
版权

1. 构造器的实现

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  #state = PENDING
  #result = undefined
  #changeState(state, result) {
    if (this.#state !== PENDING) return
    this.#state = state
    this.#result = result
    console.log(this.#state, this.#result)
  }
  constructor(exectutor) {
    const resolve = (data) => {
      this.#changeState(FULFILLED, data)
    }
    const reject = (reason) => {
      this.#changeState(REJECTED, reason)
    }
    try {
      exectutor(resolve, reject)
    } catch (err) {
      reject(err)
    }
  }
}
​
const p = new MyPromise((resolve, reject) => {
  throw 123
})
​
console.log(p)

2. then的回调执行时机

添加then函数基本结构返回结果仍然是promise 。

但是注意如果是异步执行resolve或者reject。则promise的状态永远是pending，而then函数已经执行过，永远不会被再次执行

​
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.#state === FULFILLED) {
        onFulfilled(this.#result)
      }
      if (this.#state === REJECTED) {
        onRejected(this.#result)
      }
    })
​
const p = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 1000)
  // resolve(1)
})
p.then((res) => {
  console.log('promise 完成', res)
}, (err) => {
  console.log('promise 失败', err)
})    

改造then函数 ，记录onFulfilled，onRejected，resolve，reject四个变量。等到promise状态改变时再调用回调

将处理逻辑放入run方法中，then可以调用run方法， changeState也可以调用run方法

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  #state = PENDING
  #result = undefined
  #handlers = []
  #changeState(state, result) {
    // 如果状态已经改变则返回。promise一旦确定状态就不会再改变
    if (this.#state !== PENDING) return
    this.#state = state
    this.#result = result
    this.#run()
  }
  #run() {
    // 如果状态挂起，先不执行代码
    if (this.#state === PENDING) return
    while (this.#handlers.length) {
      const {
        onFulfilled,
        onRejected,
        resolve,
        reject
      } = this.#handlers.shift()
      if (this.#state === FULFILLED) {
        if (typeof onFulfilled === 'function') {
          onFulfilled(this.#result)
        }
      } else {
        if (this.#state === REJECTED) {
          if (typeof onRejected === 'function') {
            onRejected(this.#result)
          }
        }
      }
    }
  }
  constructor(exectutor) {
    const resolve = (data) => {
      this.#changeState(FULFILLED, data)
    }
    const reject = (reason) => {
      this.#changeState(REJECTED, reason)
    }
    try {
      exectutor(resolve, reject)
    } catch (err) {
      reject(err)
    }
  }
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      this.#handlers.push({
        onFulfilled,
        onRejected,
        resolve,
        reject
      })
      this.#run()
    })
  }
}
​
const p = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    reject(1)
  }, 1000)
  // resolve(1)
})
p.then((res) => {
  console.log('promise 完成1', res)
}, (err) => {
  console.log('promise 失败1', err)
})
p.then((res) => {
  console.log('promise 完成2', res)
}, (err) => {
  console.log('promise 失败2', err)
})
p.then((res) => {
  console.log('promise 完成3', res)
}, (err) => {
  console.log('promise 失败3', err)
})
p.then((res) => {
  console.log('promise 完成4', res)
}, (err) => {
  console.log('promise 失败4', err)
})

3. then的返回值

  1. 如果对应的回调不是函数 ，即发生穿透。值穿透指的是，链式调用的参数不是函数时，会发生值穿透，就传入的非函数值忽略，传入的是之前的函数参数。

    Promise.resolve(1)
  .then(null)
  .then((data) => { console.log( data) })
//1

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then((data) => { console.log( data) }) 
// 1


  #run() {
    // 如果状态挂起，先不执行代码
    if (this.#state === PENDING) return
    while (this.#handlers.length) {
      const {
        onFulfilled,
        onRejected,
        resolve,
        reject
      } = this.#handlers.shift()
      if (this.#state === FULFILLED) {
        if (typeof onFulfilled === 'function') {
          onFulfilled(this.#result)
        } else {
          resolve(this.#result)
        }
      } else {
        if (this.#state === REJECTED) {
          if (typeof onRejected === 'function') {
            onRejected(this.#result)
          } else {
            reject(this.#result)
          }
        }
      }
    }
  }

  2. 如果对应的回调是函数，尝试运行函数并拿到返回结果

     #run() {
    // 如果状态挂起，先不执行代码
    if (this.#state === PENDING) return
    while (this.#handlers.length) {
      const {
        onFulfilled,
        onRejected,
        resolve,
        reject
      } = this.#handlers.shift()
      if (this.#state === FULFILLED) {
        if (typeof onFulfilled === 'function') {
          try {
            const data = onFulfilled(this.#result)
            resolve(data)
          } catch (err) {
            reject(err)
          }

        } else {
          resolve(this.#result)
        }
      } else {
        if (this.#state === REJECTED) {
          if (typeof onRejected === 'function') {
            try {
              const data = onRejected(this.#result)
              resolve(data)
            } catch (err) {
              reject(err)
            }

          } else {
            reject(this.#result)
          }
        }
      }
    }
  }

  3. 优化重复代码#runOne

    #runOne(callback, resolve, reject) {
    if (typeof callback !== 'function') {
      const settled = this.#state === FULFILLED ? resolve : reject;
      settled(this.#result)
    } else {
      try {
        const result = callback(this.#result)
        resolve(result)
      } catch (err) {
        reject(err)
      }
    }
  }
  #run() {
    // 如果状态挂起，先不执行代码
    if (this.#state === PENDING) return
    while (this.#handlers.length) {
      const {
        onFulfilled,
        onRejected,
        resolve,
        reject
      } = this.#handlers.shift()
      if (this.#state === FULFILLED) {
        this.#runOne(onFulfilled, resolve, reject)
      } else {
        this.#runOne(onRejected, resolve, reject)
      }
    }
  }

  4. 如果回调函数返回的结果是promise ，首先需要辅助函数判断回调函数的结果是否是promise。判断then属性是否是函数

    #isPromiseLike(value) {
    if (value !== null && (typeof value === 'object' || typeof value === 'function')) {
      return typeof value.then === 'function'
    }
    return false
  }
​
  #runOne(callback, resolve, reject) {
    if (typeof callback !== 'function') {
      const settled = this.#state === FULFILLED ? resolve : reject;
      settled(this.#result)
      return
    } else {
      try {
        const data = callback(this.#result)
        if (this.#isPromiseLike(data)) {
          data.then(resolve, reject)
        } else {
          resolve(data)
        }
​
      } catch (err) {
        reject(err)
      }
    }
  }

4.微队列和PromiseLike

 #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)
    }
  }
  #runOne(callback, resolve, reject) {
    this.#runMicroTask(() => {
      if (typeof callback !== 'function') {
        const settled = this.#state === FULFILLED ? resolve : reject;
        settled(this.#result)
        return
      } else {
        try {
          const data = callback(this.#result)
          if (this.#isPromiseLike(data)) {
            data.then(resolve, reject)
          } else {
            resolve(data)
          }
​
        } catch (err) {
          reject(err)
        }
      }
    })
​
  }

5. resolve和reject

  catch(onRejected) {
    return this.then(undefined, onRejected)
  }
  finally(onFinally) {
    return this.then(data => {
      onFinally();
      return data
    }, err => {
      onFinally()
      throw err
    })
  }
  /* 
    1. 判断value是否是promise 如果是直接返回
    2. 判断是否是then方法的promise如果是直接调用then方法
   */
  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)
    }
    return p
  }
  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason)
    })
  }

6. promise.all

  1. 是静态方法返回一个promise

  2. Promise 都被兑现时，返回的 Promise 也将被兑现（即使传入的是一个空的可迭代对象），并返回一个包含所有兑现值的数组。

  3. 如果输入的任何 Promise 被拒绝，则返回的 Promise 将被拒绝，并带有第一个被拒绝的原因。

​
static all() {
    let _resolve, _reject
    const p = new MyPromise((resolve, reject) => {
      _resolve = resolve
      _reject = reject
    })
    let count = 0
    for (let param of params) {
      count++
    }
    // 空的迭代对象
    if (count === 0) {
      _resolve(result)
    }
    return p
  }
​
static all(params) {
    let _resolve, _reject
    const p = new MyPromise((resolve, reject) => {
      _resolve = resolve
      _reject = reject
    })
    let count = 0
    let fulfilledCount = 0
    const result = []
    for (let param of params) {
      let i = count
      count++
      MyPromise.resolve(param).then(data => {
        result[i] = data
        fulfilledCount++
        if (fulfilledCount === count) {
          _resolve(result)
        }
      }, _reject)
​
    }
    // 空的迭代对象
    if (count === 0) {
      _resolve(result)
    }
    return p
  }

测试

MyPromise.all([]).then(data => {
  console.log(data) //[]
})
​
MyPromise.all([1, 2, 3, 4]).then(data => {
  console.log(data) //[1, 2, 3, 4]
})
​
MyPromise.all([1, 2, 3, MyPromise.reject(4)]).then(data => {
  console.log(data)
}, (err) => {
  console.log(err) //4
})
​
MyPromise.all([1, 2, MyPromise.reject(3), MyPromise.reject(4)]).then(data => {
  console.log(data)
}, (err) => {
  console.log(err) //3
})

7. promise.race

  static race(params) {
    let _resolve, _reject
    const p = new MyPromise((resolve, reject) => {
      _resolve = resolve
      _reject = reject
    })
    let result = null
    for (let param of params) {
      MyPromise.resolve(param).then(data => {
        result = data
        _resolve(result)
      }, err => {
        _reject(err)
      })
    }
    return p
  }

测试

const p = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 1000)
})
MyPromise.race([p, MyPromise.reject(3)]).then(data => {
  console.log(data)
}, (err) => {
  console.log(err) //3
})

liuchao0704
关注
  • 29
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript】手写Promise
编码世界
05-15 4595
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
手写promise
weixin_44335776的博客
02-08 433
手写promise
JS手写Promise（详细过程）
m0_56698268的博客
03-28 1926
手写Promise
【手写Promise】
热门推荐
weixin_49487698的博客
05-16 1万+
一、JS的错误 1、错误的类型 2、错误处理 3、错误对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
手写Promise源码
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
08-17 237
纯手写Promise源码，如有遗漏场景或漏洞，请评论区指出，不胜感激！
Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_
09-30
在本文中，我们将深入探讨如何使用原生JavaScript手写Promise。 首先，我们需要理解Promise的基本概念。Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。每个Promise实例在其生命...
js代码-手写promise.all
07-16
// 这里将实现手写Promise.all的逻辑 }); } ``` 接下来，我们需要跟踪Promise的状态。我们可以创建一个计数器来记录已解析的Promise数量，以及一个存储结果的数组： ```javascript let resolvedCount = 0; let ...
Promise-A-Plus:纯 TypeScript 手写 Promise A+
05-29
手写 Promise A+ English： 术语 解决（fulfill） 指的是一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中使用 fulfill 来表示解决，但是目前常用 resolve 来取代。 拒绝（reject） 指的...
JS手写Promise源码
12-19
为什么要手写Promise？1、深入理解Promise的工作原理：手写Promise可以帮助我们更深入地理解Promise的工作原理和内部机制。通过手动实现Promise的核心功能，如异步调用、状态管理和回调处理，我们可以更好地理解...
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1458
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
Vue双向绑定
m0_56131422的博客
09-01 755
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 480
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 447
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2595
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 818
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
vue3使用-watch监听总结
weixin_44072254的博客
09-01 527
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1298
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
手写 Promise
09-01
以下是一个简单的手写Promise的示例： ```javascript class Promise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onResolveCallbacks = []; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值