欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Js实现Promise(符合Promise/A+规范)

程序员文章站 2022-03-22 09:57:40
// 手写promise function Promise(executor) { var _this = this this.state = 'pending' this.value = undefined this.reason = undefined this.onFullfiledFun = [] // 存储异步 this.onRejectedFun = [] // 存储异步 ....
// 手写promise
      function Promise(executor) {
        var _this = this
        this.state = 'pending'
        this.value = undefined
        this.reason = undefined
        this.onFullfiledFun = [] // 存储异步
        this.onRejectedFun = [] // 存储异步

        executor(resolve, reject) // 立即执行

        function resolve(value) {
          if (_this.state === 'pending') {
            _this.value = value
            _this.onFullfiledFun.forEach((fn) => fn(value))
            _this.state = 'fulfilled'
          }
        }

        function reject(reason) {
          if (_this.state === 'pending') {
            _this.reason = reason
            _this.onRejectedFun.forEach((fn) => fn(reason))
            _this.state = 'rejected'
          }
        }
      }

      Promise.prototype.then = function (onFullfiled, onRejected) {
        var promise2 = new Promise((resolve, reject) => {
          // pending为等待态,异步还未完成
          if (this.state === 'pending') {
            if (typeof onFullfiled === 'function') {
              this.onFullfiledFun.push(onFullfiled)
            }
            if (typeof onRejected === 'function') {
              this.onRejectedFun.push(onRejected)
            }
          }
          if (this.state === 'fulfilled') {
            if (typeof onFullfiled === 'function') {
              onFullfiled(this.value)
            }
          }
          if (this.state === 'rejected') {
            if (typeof onRejected === 'function') {
              onRejected(this.reason)
            }
          }
        })
        return promise2
      }

      /**
       * 解析then返回值与新Promise对象
       * @param {Object} promise2 新的Promise对象
       * @param {*} x 上一个then的返回值
       * @param {Function} resolve promise2的resolve
       * @param {Function} reject promise2的reject
       */
      function resolvePromise(promise2, x, resolve, reject) {
        if (promise2 === x) {
          return new TypeError('Promise发生了循环引用')
        }
        if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
          // 可能是对象或者函数
          try {
            let then = x.then // 取出then方法引用

            // then是function,那么就执行promise
            if (typeof then === 'function') {
              let y = then.call(
                x,
                (y) => {
                  // 递归调用,传入y若是Promise对象,继续循环
                  resolvePromise(promise2, y, resolve, reject)
                },
                (r) => {
                  reject(r)
                },
              )
            } else {
              resolve(x)
            }
          } catch (e) {
            reject(e)
          }
        } else {
          // 否则是个普通值
          resolve(x)
        }
      }

 

本文地址:https://blog.csdn.net/RedaTao/article/details/107509029

相关标签: 前端 promise