Promise分析与实现(上篇)

最新推荐文章于 2023-12-28 16:16:04 发布
最新推荐文章于 2023-12-28 16:16:04 发布
阅读量2k 收藏 12
点赞数 9
分类专栏： 源码 javascript 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46299172/article/details/107735886
版权

Promise分析与实现

分析原生Promise

1.Promise接受一个参数，且参数只能为函数，其函数的参数为两个函数
let p = new Promise((resolve, reject) => {
    
})

参数只能为函数，否则抛出错误

var res = 1
let p = new Promise(res)

在这里插入图片描述

2. Promise本身就是一个状态机，其有三种状态：pending, fullfilled, rejected. 还可以得出两个内部属性：[[PromiseStatus]]，[[PromiseValue]]

状态只能由 Pending 变为 Fulfilled 或由 Pending 变为 Rejected ，且状态改变之后不会在发生变化，会一直保持这个状态。

不调用函数时

let p = new Promise((resolve, reject) => {

})
console.log(p)

在这里插入图片描述

调用resolve时

let p = new Promise((resolve, reject) => {
  resolve("调用了resolve")
})
console.log(p)

在这里插入图片描述

调用reject时

let p = new Promise((resolve, reject) => {
  reject("调用了reject")
})
console.log(p)

在这里插入图片描述

3.Promise的实例有一个then方法，接收两个函数参数

调用resolve，then的第一个函数参数执行
调用reject，then的第二个函数参数执行

let p = new Promise((resolve, reject) => {
  resolve("调用了resolve")
})
    
p.then(res => {
  console.log(res)
}, err => {
  console.log(err)
})
4.Promise的then方法支持多次调用
let promise1 = new Promise((resolve, reject) => {
  resolve('1')
})
promise1.then(res => {
  console.log(res)
})
promise1.then(res => {
  console.log(res)
})

打印结果：

在这里插入图片描述

5.Promise的微任务
setTimeout(function(){
  console.log(2)
}, 0)
let promise1 = new Promise((resolve, reject) => {
  resolve('1')
})
promise1.then(res => {
  console.log(res)
})

打印结果：
在这里插入图片描述

6.Promise的then返还一个Promise对象，可链式调用
let promise1 = new Promise((resolve, reject) => {
  resolve('1')
})
promise1.then(res => {
  console.log(res)
  return res
}).then(res => {
  console.log(res)
})

打印结果：
在这里插入图片描述

7.Promise的then接收Promise对象或返回结果时进行不同操作

当返回值不是Promise对象时 ，则直接将返回值作为新返回的 Promise 对象的值， 即then的res或err的参数

let promise1 = new Promise((resolve, reject) => {
  resolve()
})
promise2 = promise1.then(res => {
  // 当return一个不是Promise对象的值
  return 'return一个不是Promise对象的值'
})
promise2.then(res => {
  console.log(res) //打印出：return一个不是Promise对象的值
})

在这里插入图片描述

当返回值为Promise对象时 ，这时后面一个回调函数，就会等待返回的这个Promise对象的状态发生变化时(执行resolve()或reject()时)，才会被调用，并且新的Promise状态和返回的这个Promise对象的状态相同。

let promise1 = new Promise((resolve, reject) => {
  resolve()
})
promise2 = promise1.then(res => {
  // 返回一个Promise对象
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('return一个Promise对象')
    }, 2000)
  })
})
promise2.then(res => {
  console.log(res) //2秒后打印出：return一个Promise对象
})

在这里插入图片描述

8.Promise的then抛出异常时

如果 onFulfilled 或者onRejected 抛出一个异常 err ，则返回的Promise对象的状态必须变为失败Rejected，并返回失败的值 err

let promise1 = new Promise((resolve, reject) => {
  resolve('success')
})
promise2 = promise1.then(res => {
  throw new Error('这里抛出一个异常err')
})
promise2.then(res => {
  console.log(res)
}, err => {
  console.log(err) //打印出：这里抛出一个异常err
})

在这里插入图片描述

9.Promise的then的值穿透

值穿透是个常见的面试题

当then的onFulfilled参数不是函数时，返回的Promise对象的状态必须变成fulfilled，并返回调用then的Promise的成功的值

let promise1 = new Promise((resolve, reject) => {
  resolve('success')
})
promise2 = promise1.then('then的第一个参数不是函数了')
promise2.then(res => {
  console.log(res) // 打印出：success
}, err => {
  console.log(err)
})

在这里插入图片描述

当then的onRejected参数不是函数时，返回的Promise对象的状态必须变成rejected，并返回调用then的Promise的失败的值

let promise1 = new Promise((resolve, reject) => {
  reject('fail')
})
promise2 = promise1.then(res => res, 'then的第二个参数不是函数了')
promise2.then(res => {
  console.log(res)
}, err => {
  console.log(err) // 打印出：fail
})

在这里插入图片描述

LuPromise的编写

1.实现Promise分析的第1、2点

通过new Promise可知，Promise是一个类，那么现在来实现一个class LuPromise。

1.首先，必须接收一个函数作为参数，不是函数则抛出错误
2.且拥有 [[PromiseStatus]]，[[PromiseValue]]两个内部属性
3.当Promise内部什么都不调用时，status值为pending，value值为undefined

// 判断是否是函数
const isFunction = f => typeof f === 'function'
// 定义Promise的三种状态常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'

class LuPromise {
  constructor (handle) {
    // 如果参数不是函数
    if (!isFunction(handle)) {
      // 不是函数就抛出错误
      throw new Error('LuPromise必须接收函数类型的参数')
    }
    // 添加状态属性 status [[promiseStatus]]
    this._status = PENDING
    // 添加Promise的值 value [[promiseValue]]
    this._value = undefined
  }
}

接下来是验证

当参数不为函数时

var res = 1
let p = new LuPromise(res)

抛出错误成功！
在这里插入图片描述

当LuPromise内部不执行调用时，打印value和status值

let p = new LuPromise((resolve, reject) => {
})
console.log(p)

状态和值成功！
在这里插入图片描述

2.LuPromise的函数参数接收两个函数，并可以在内部调用
// 判断是否是函数
const isFunction = f => typeof f === 'function'
// 定义Promise的三种状态常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'

class LuPromise {
  constructor (handle) {
    // 如果参数不是函数
    if (!isFunction(handle)) {
      // 不是函数就抛出错误
      throw new Error('LuPromise必须接收函数类型的参数')
    }
    // 添加状态属性 [[promiseStatus]]
    this._status = PENDING
    // 添加Promise的值 [[promiseValue]]
    this._value = undefined
    // 执行handle后，这两个函数也就相当于了内部函数 高阶函数
    handle(function(val){
      // resolve
      // 先检测Promise的状态是否是PENDING，如果不是，就直接返回
      if (this._status !== PENDING) return
      this._status = FULFILLED
      this._value = val
    }.bind(this), function(err){
      // reject
      // 先检测Promise的状态是否是PENDING，如果不是，就直接返回
      if (this._status !== PENDING) return
      this._status = REJECTED
      this._value = err
    }.bind(this))

  }
}
LuPromise中调用resolve和reject

调用resolve

let p = new LuPromise((resolve, reject) => {
  resolve('11')
})
console.log(p)

在这里插入图片描述

调用reject

let p = new LuPromise((resolve, reject) => {
  reject('22')
})
console.log(p)

在这里插入图片描述

这一步实现了让handle内部的两个函数参数在handle执行后，变成了LuPromise的内部函数，可以通过内部直接调用，也就是resolve()和reject()
至于bind(this)，可以知道resolve()和reject()调用时，this指向window，因此通过bind绑定一下this，当然这里也可将函数写成箭头函数，但是不利于后面的编写

3.将第二步封装一下，把匿名函数写出来
// 判断是否是函数
const isFunction = f => typeof f === 'function'
// 定义Promise的三种状态常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'

class LuPromise {
  constructor (handle) {
    // 如果参数不是函数
    if (!isFunction(handle)) {
      // 不是函数就抛出错误
      throw new Error('LuPromise必须接收函数类型的参数')
    }
    // 添加状态属性 [[promiseStatus]]
    this._status = PENDING
    // 添加Promise的值 [[promiseValue]]
    this._value = undefined
    try {
      // 执行handle后，这两个函数也就相当于了内部函数 高阶函数
      handle(this._resolve.bind(this), this._reject.bind(this))
    } catch (error) {
      this._reject(error)
    }
  }
  
  _resolve (val) {
    // resolve
    // 先检测Promise的状态是否是PENDING，如果不是，就直接返回
    if (this._status !== PENDING) return
    this._status = FULFILLED
    this._value = val
  }

  _reject (err) {
    // reject
    // 先检测Promise的状态是否是PENDING，如果不是，就直接返回
    if (this._status !== PENDING) return
    this._status = REJECTED
    this._value = err
  }
}
4. then方法，实现调用resolve和reject分别触发相关函数(错误写法) 手写过程中碰到的

then方法在class LuPromise内部

// then方法
then (onFUlfilled, onRejected) {
  const { _value, _status } = this
  // 判断有就执行
  onFUlfilled && onFUlfilled(_value)
  // 判断有就执行
  onRejected && onRejected(_value)
}

调用resolve

let p = new LuPromise((resolve, reject) => {
  resolve('resolve调用了')
})
// console.log(p)
p.then(res => {
  console.log(res)
}, err => {
  console.log(err)
})

在这里插入图片描述

调用reject

let p = new LuPromise((resolve, reject) => {
  reject('reject调用了')
})
// console.log(p)
p.then(res => {
  console.log(res)
}, err => {
  console.log(err)

在这里插入图片描述
可以看到，已经实现了then
但是，这是错误的，来看看这个

将resolve放在setTimeout中

let p = new LuPromise((resolve, reject) => {
  setTimeout(function(){
    resolve('resolve调用了')
  }, 1000)
})
// console.log(p)
p.then(res => {
  console.log(res)
}, err => {
  console.log(err)
})

这是打印结果：空白，什么都没有打印

在这里插入图片描述

在then方法中添加几行代码，就可以看出其原因了

// then方法
then(onFUlfilled, onRejected) {
  const {
    _value,
    _status
  } = this
  if (_status === FULFILLED) {
    // 判断有就执行
    onFUlfilled && onFUlfilled(_value)
  } else if (_status === REJECTED) {
    // 判断有就执行
    onRejected && onRejected(_value)
  } else if (_status === PENDING) {
    console.log('pending')
  }
}

这是打印结果：pending！
这里可以看出then中方法并不是在resolve执行后调用，所以现在需要实现的就是调用resolve和reject后调用相关函数

在这里插入图片描述
接下来就是解决这个错误啦

5.实现Promise分析中第3点和第4点：可多次调用then和调用resolve、reject时触发函数

由于then方法支持多次调用，可以使用两个队列来保存onFUlfilled和onRejected函数，并在resolve和reject调用后触发

constructor

添加两个队列_fulfilledArray ，_rejectedArray

constructor (handle) {
  // 如果参数不是函数
  if (!isFunction(handle)) {
    // 不是函数就抛出错误
    throw new Error('LuPromise必须接收函数类型的参数')
  }
  // 添加状态属性 [[promiseStatus]]
  this._status = PENDING
  // 添加Promise的值 [[promiseValue]]
  this._value = undefined
  // 添加成功回调函数事件队列
  this._fulfilledArray = []
  // 添加失败回调函数事件队列
  this._rejectedArray = []
  try {
    // 执行handle后，这两个函数也就相当于了内部函数 高阶函数
    handle(this._resolve.bind(this), this._reject.bind(this))
  } catch (error) {
    this._reject(error)
  }
then
// then方法
then(onFUlfilled, onRejected) {
  const {
    _value,
    _status
  } = this

  switch (_status) {
    // 当状态还是进行中时，把两个方法都加入到回调函数事件队列中
    case PENDING:
      this._fulfilledArray.push(onFUlfilled)
      this._rejectedArray.push(onRejected)
      break
      // 当状态改变成Fulfilled时，直接触发onFulfilled函数
    case FULFILLED:
      onFUlfilled(_value)
      break
      // 当状态改变成Rejected时，直接触发onRejected函数
    case REJECTED:
      onRejected(_value)
      break
  }
_resolve和reject
_resolve(val) {
  // resolve
  // 先检测Promise的状态是否是PENDING，如果不是，就直接返
  if (this._status !== PENDING) return
  const run = () => {
    this._status = FULFILLED
    this._value = val
    let CallBack;
    // 获取成功队列中的第一个回调函数，执行
    while (CallBack = this._fulfilledArray.shift()) {
      CallBack && CallBack(val)
    }
  }
  // 为了先保存函数，然后再执行，所以放在了setTimeout中
  setTimeout(run)
}
_reject(err) {
  // reject
  // 先检测Promise的状态是否是PENDING，如果不是，就直接返
  if (this._status !== PENDING) return
  // 依次执行失败队列中的函数，并清空队列
  const run = () => {
    this._status = REJECTED
    this._value = err
    let CallBack;
    // 获取失败队列中的第一个回调函数，执行
    while (CallBack = this._rejectedArray.shift()) {
      CallBack && CallBack(err)
    }
  }
  // 为了先保存函数，然后再执行，所以放在了setTimeout中
  setTimeout(run)
}

接下来看打印结果

let p = new LuPromise((resolve, reject) => {
  setTimeout(function(){
    resolve('resolve调用了')
  }, 1000)
})
p.then(res => {
  console.log(res)
}, err => {
  console.log(err)
})

在这里插入图片描述
完成了在resolve和reject调用后才触发then中相应的函数了！

6.实现Promise分析中的第5点：将LuPromise伪装为微任务
_reject和_resolve

通过mutationObserver将LuPromise伪装成微任务

_resolve(val) {
  // resolve
  // 先检测Promise的状态是否是PENDING，如果不是，就直接返回
  if (this._status !== PENDING) return
  const run = () => {
    this._status = FULFILLED
    this._value = val
    let CallBack;
    // 获取成功队列中的第一个回调函数，执行
    while (CallBack = this._fulfilledArray.shift()) {
      CallBack(val)
    }
  }
  // 通过MutationObserver实现微任务
  let ob = new MutationObserver(run)
  ob.observe(document.body, {
    attributes: true
  })
  document.body.setAttribute("lu", Math.random())
}
_reject(err) {
  // reject
  // 先检测Promise的状态是否是PENDING，如果不是，就直接返回
  if (this._status !== PENDING) return
  // 依次执行失败队列中的函数，并清空队列
  const run = () => {
    this._status = REJECTED
    this._value = err
    let CallBack;
    // 获取失败队列中的第一个回调函数，执行
    while (CallBack = this._rejectedArray.shift()) {
      CallBack(err)
    }
  }
  // 通过MutationObserver实现微任务
  let ob = new MutationObserver(run)
  ob.observe(document.body, {
    attributes: true
  })
  document.body.setAttribute("lu", Math.random())
}
打印
setTimeout(function(){
  console.log('setTimeout')
})
let p = new LuPromise((resolve, reject) => {
    resolve('resolve调用了')
})
p.then(res => {
  console.log(res)
}, err => {
  console.log(err)
})

LuPromise成功伪装成微任务，在setTimeout之前执行

在这里插入图片描述

7.实现Promise分析中的第6点，then返回LuPromise实例
// then方法
then(onFUlfilled, onRejected) {
  const {
    _value,
    _status
  } = this
  return new LuPromise((onFulfilledNext, onRejectedNext) => {
    switch (_status) {
      // 当状态还是进行中时，把两个方法都加入到回调函数事件队列中
      case PENDING:
        this._fulfilledArray.push(onFUlfilled)
        this._rejectedArray.push(onRejected)
        break
        // 当状态改变成Fulfilled时，直接触发onFulfilled函数
      case FULFILLED:
        onFUlfilled(_value)
        break
        // 当状态改变成Rejected时，直接触发onRejected函数
      case REJECTED:
        onRejected(_value)
        break
    }
  }) 

let p = new LuPromise((resolve, reject) => {
    resolve('resolve调用了')
})
let b = p.then()
console.log(b)

打印结果：成功返回LuPromise实例

在这里插入图片描述

8.实现Promise分析中的第7点，then根据接收的是否是LuPromise或普通值，进行不同操作
// then方法
then(onFUlfilled, onRejected) {
  const {
    _value,
    _status
  } = this
  return new LuPromise((onFulfilledNext, onRejectedNext) => {
    // 封装一个状态为Fulfilled的函数
    let fulfilled = value => {
      let result = onFUlfilled(value)
      // 如果回调函数onFulfilled返回的是Promise对象，则必须等待其状态改变后在执行下一个then的回调
      if (result instanceof LuPromise) {
        result.then(onFulfilledNext, onRejectedNext)
      } else {
        // 否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
        onFulfilledNext(result)
      }
    }
    //封装一个状态为Rejected的函数
    let rejected = error => {
      let result = onRejected(error)
      // 如果回调函数onFulfilled返回的是Promise对象，则必须等待其状态改变后在执行下一个then的回调
      if (result instanceof LuPromise) {
        result.then(onFulfilledNext, onRejectedNext)
      } else {
        // 否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
        onFulfilledNext(result)
      }
    }
    switch (_status) {
      // 当状态还是进行中时，把两个方法都加入到回调函数事件队列中
      case PENDING:
        this._fulfilledArray.push(fulfilled)
        this._rejectedArray.push(rejected)
        break
        // 当状态改变成Fulfilled时，直接触发fulfilled函数
      case FULFILLED:
        fulfilled(_value)
        break
        // 当状态改变成Rejected时，直接触发rejected函数
      case REJECTED:
        rejected(_value)
        break
    }
  })
}

注意这里，将之前推入队列和执行的替换成了封装的fulfilled和rejected的函数，其内部进行了对返回值的判断

9.实现Promise分析第8点，当抛出异常时，返回的Promise对象状态变成rejected并执行reject函数
// then方法
then(onFUlfilled, onRejected) {
  const {
    _value,
    _status
  } = this
  return new LuPromise((onFulfilledNext, onRejectedNext) => {
    // 封装一个状态为Fulfilled的函数
    let fulfilled = value => {
      try {
        let result = onFUlfilled(value)
        // 如果回调函数onFulfilled返回的是Promise对象，则必须等待其状态改变后在执行下一个then的回调
        if (result instanceof LuPromise) {
          result.then(onFulfilledNext, onRejectedNext)
        } else {
          // 否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
          onFulfilledNext(result)
        }
      } catch (error) {
        // 如果函数出错，返回的Promise对象的状态变为rejected，并执行reject函数
        onRejectedNext(error)
      }
    }
    //封装一个状态为Rejected的函数
    let rejected = error => {
      try {
        let result = onRejected(error)
        // 如果回调函数onFulfilled返回的是Promise对象，则必须等待其状态改变后在执行下一个then的回调
        if (result instanceof LuPromise) {
          result.then(onFulfilledNext, onRejectedNext)
        } else {
          // 否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
          onFulfilledNext(result)
        }
      } catch (error) {
        // 如果函数出错，返回的Promise对象的状态变为rejected，并执行reject函数
        onRejectedNext(error)
      }
    }
    
    switch (_status) {
      // 当状态还是进行中时，把两个方法都加入到回调函数事件队列中
      case PENDING:
        this._fulfilledArray.push(fulfilled)
        this._rejectedArray.push(rejected)
        break
        // 当状态改变成Fulfilled时，直接触发fulfilled函数
      case FULFILLED:
        fulfilled(_value)
        break
        // 当状态改变成Rejected时，直接触发rejected函数
      case REJECTED:
        rejected(_value)
        break
    }
  })
}

这里只是将其包裹在try-catch中，接下来看打印结果

let promise1 = new LuPromise((resolve, reject) => {
  resolve('resolve调用了')
})
promise2 = promise1.then(res => {
  throw new Error('这里抛出一个异常err')
})
promise2.then(res => {
  console.log(res)
}, err => {
  console.log(err) //打印出：这里抛出一个异常err
})

在这里插入图片描述
好，分析第8点也完成！

10.实现Promise分析第9点，then的值穿透问题
// then方法
then(onFUlfilled, onRejected) {
  const {
    _value,
    _status
  } = this
  return new LuPromise((onFulfilledNext, onRejectedNext) => {
    // 封装一个状态为Fulfilled的函数
    let fulfilled = value => {
      try {
        // 如果onFulfilled参数不是函数
        if (!isFunction(onFUlfilled)) {
          // 直接将之前Promise的成功值value作为下一个Promise的值，进行调用
          onFulfilledNext(value)
        } else {
          // 如果onFulfilled参数是函数，记录函数返回值
          let result = onFUlfilled(value)
          // 如果回调函数onFulfilled返回的是Promise对象，则必须等待其状态改变后在执行下一个then的回调
          if (result instanceof LuPromise) {
            result.then(onFulfilledNext, onRejectedNext)
          } else {
            // 否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
            onFulfilledNext(result)
          }
        }
      } catch (error) {
        // 如果函数出错，返回的Promise对象的状态变为rejected，并执行reject函数
        onRejectedNext(error)
      }
    }
    //封装一个状态为Rejected的函数
    let rejected = error => {
      try {
        // 如果onRejected参数不是函数
        if (!isFunction(onRejected)) {
          // 直接将之前Promise的失败值error作为下一个Promise的值，进行调用
          onRejectedNext(error)
        } else {
          // 如果onRejected参数是函数，记录函数返回值
          let result = onRejected(error)
          // 如果回调函数onFulfilled返回的是Promise对象，则必须等待其状态改变后在执行下一个then的回调
          if (result instanceof LuPromise) {
            result.then(onFulfilledNext, onRejectedNext)
          } else {
            // 否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
            onFulfilledNext(result)
          }
        }
      } catch (error) {
        // 如果函数出错，返回的Promise对象的状态变为rejected，并执行reject函数
        onRejectedNext(error)
      }
    }
    switch (_status) {
      // 当状态还是进行中时，把两个方法都加入到回调函数事件队列中
      case PENDING:
        this._fulfilledArray.push(fulfilled)
        this._rejectedArray.push(rejected)
        break
        // 当状态改变成Fulfilled时，直接触发fulfilled函数
      case FULFILLED:
        fulfilled(_value)
        break
        // 当状态改变成Rejected时，直接触发rejected函数
      case REJECTED:
        rejected(_value)
        break
    }
  })
}

这里添加了对onFUlfilled和onRejected是否是函数的判断，如果不是函数，就发生所谓的值穿透。

let promise1 = new LuPromise((resolve, reject) => {
  resolve('resolve穿透了')
})
promise2 = promise1.then('then的第一个参数不是函数了，要发生值穿透了')
promise2.then(res => {
  console.log(res)
}, err => {
  console.log(err) // 打印出：fail
})

打印结果
在这里插入图片描述

let promise1 = new LuPromise((resolve, reject) => {
  reject('reject穿透了')
})
promise2 = promise1.then(res => res, 'then的第二个参数不是函数了，要发生值穿透了')
promise2.then(res => {
  console.log(res)
}, err => {
  console.log(err) // 打印出：fail
})

打印结果：

在这里插入图片描述
好！第9点值穿透也完成了

总结

实现了最主要的LuPromise类和then方法，在下篇中，将补齐一些静态方法

这是到目前为止的所有代码

// 判断是否是函数
const isFunction = f => typeof f === 'function'
// 定义Promise的三种状态常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'



class LuPromise {
  constructor(handle) {
    // 如果参数不是函数
    if (!isFunction(handle)) {
      // 不是函数就抛出错误
      throw new Error('LuPromise必须接收函数类型的参数')
    }
    // 添加状态属性 [[promiseStatus]]
    this._status = PENDING
    // 添加Promise的值 [[promiseValue]]
    this._value = undefined
    // 添加成功回调函数事件队列
    this._fulfilledArray = []
    // 添加失败回调函数事件队列
    this._rejectedArray = []
    try {
      // 执行handle后，这两个函数也就相当于了内部函数 高阶函数
      handle(this._resolve.bind(this), this._reject.bind(this))
    } catch (error) {
      this._reject(error)
    }
  }

  _resolve(val) {
    // resolve
    // 先检测Promise的状态是否是PENDING，如果不是，就直接返回
    if (this._status !== PENDING) return
    const run = () => {
      this._status = FULFILLED
      this._value = val
      let CallBack;
      // 获取成功队列中的第一个回调函数，执行
      while (CallBack = this._fulfilledArray.shift()) {
        CallBack(val)
      }
    }

    // 通过MutationObserver实现微任务
    let ob = new MutationObserver(run)
    ob.observe(document.body, {
      attributes: true
    })
    document.body.setAttribute("lu", Math.random())
  }



  _reject(err) {
    // reject
    // 先检测Promise的状态是否是PENDING，如果不是，就直接返回
    if (this._status !== PENDING) return
    // 依次执行失败队列中的函数，并清空队列
    const run = () => {
      this._status = REJECTED
      this._value = err
      let CallBack;
      // 获取失败队列中的第一个回调函数，执行
      while (CallBack = this._rejectedArray.shift()) {
        CallBack(err)
      }
    }
    // 通过MutationObserver实现微任务
    let ob = new MutationObserver(run)
    ob.observe(document.body, {
      attributes: true
    })
    document.body.setAttribute("lu", Math.random())
  }
  // then方法
  then(onFUlfilled, onRejected) {
    const {
      _value,
      _status
    } = this

    return new LuPromise((onFulfilledNext, onRejectedNext) => {
      // 封装一个状态为Fulfilled的函数
      let fulfilled = value => {
        try {
          // 如果onFulfilled参数不是函数
          if (!isFunction(onFUlfilled)) {
            // 直接将之前Promise的成功值value作为下一个Promise的值，进行调用
            onFulfilledNext(value)
          } else {
            // 如果onFulfilled参数是函数，记录函数返回值
            let result = onFUlfilled(value)
            // 如果回调函数onFulfilled返回的是Promise对象，则必须等待其状态改变后在执行下一个then的回调
            if (result instanceof LuPromise) {
              result.then(onFulfilledNext, onRejectedNext)
            } else {
              // 否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
              onFulfilledNext(result)
            }
          }

        } catch (error) {
          // 如果函数出错，返回的Promise对象的状态变为rejected，并执行reject函数
          onRejectedNext(error)
        }
      }

      //封装一个状态为Rejected的函数
      let rejected = error => {
        try {
          // 如果onRejected参数不是函数
          if (!isFunction(onRejected)) {
            // 直接将之前Promise的失败值error作为下一个Promise的值，进行调用
            onRejectedNext(error)
          } else {
            // 如果onRejected参数是函数，记录函数返回值
            let result = onRejected(error)
            // 如果回调函数onFulfilled返回的是Promise对象，则必须等待其状态改变后在执行下一个then的回调
            if (result instanceof LuPromise) {
              result.then(onFulfilledNext, onRejectedNext)
            } else {
              // 否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
              onFulfilledNext(result)
            }
          }

        } catch (error) {
          // 如果函数出错，返回的Promise对象的状态变为rejected，并执行reject函数
          onRejectedNext(error)
        }
      }

      switch (_status) {
        // 当状态还是进行中时，把两个方法都加入到回调函数事件队列中
        case PENDING:
          this._fulfilledArray.push(fulfilled)
          this._rejectedArray.push(rejected)
          break
          // 当状态改变成Fulfilled时，直接触发fulfilled函数
        case FULFILLED:
          fulfilled(_value)
          break
          // 当状态改变成Rejected时，直接触发rejected函数
        case REJECTED:
          rejected(_value)
          break
      }
    })
  }
}
Coder小鹿
关注
专栏目录
netty案例，netty4.1源码分析篇六《Netty异步架构监听类Promise源码分析》
bugstack虫洞栈
09-26 1604
分析Promise之前我们先来看两个单词；Promise、Future >Promise v. 许诺;承诺;答应;保证;使很可能;预示 Future n. 将来;未来;未来的事;将来发生的事;前景;前途;前程 他们的含义都是对未来即将要发生的事情做相应的处理，这也是在异步编程中非常常见的类名。 Netty是一个异步网络处理框架，在实现中大量使用了Future机制，并在Java自带Future的基础上，增加了Promise机制。这两个实现类的目的都是为了使异步编程更加方便使用。
Promise的出现与实现
tangding12的博客
12-02 452
这篇文章总结一下JS本身单线程异步的局限性(promise出现的原因)，以及实现一个简易的Promise。 单线程与异步   JavaScript是一个单线程执行的语言，在不考虑异步编程的情况下，它执行的顺序就是一个eventLoop的简单循环。比如书写一段简单的JS代码： // 声明两个变量，和一个函数 var demoVariA = 100; var demoVariB = 200; // 函...
Promise解析
最新发布
m0_56516186的博客
12-28 568
理解1：Promise是一种异步编程的解决方案，它可以让我们更加方便的处理异步操作，避免回调炼狱的问题（callback hell）。理解2：New一个Promise可以理解为创建了一个异步容器或者创建了一个异步对象（因为是为了解决异步问题为了更形象的理解所以称它为异步对象），里面保存着某个未来才会结束的事件的结果。理解3：Promise保存的事件结果有三种状态pending、fulfilled（resolved）、rejected,只有异步操作的结果能决定当前是哪一种状态。一、文字描述promise。
Promise分析与实现(中篇)
小鹿的博客
08-02 263
完成catch和一些静态方法 对原生Promise进行分析 1.catch方法 let promise1 = new Promise((resolve, reject) => { resolve('1') }) promise1.then(res => { reject('1') }).catch(err => { console.log(err) }) 这里故意调用reject出错 再来看这个 let promise1 = new Promise((resolve,
Promise原理分析-50行实现简Promise
小结巴巴的博客
09-24 247
Promise 介绍 promise 主要用于链式的表示一个异步操作的结果及其返回值 Promise对象是一个代理对象(代理一个值)，被代理的值在Promise对象创建时可能是未知的。 它允许你为异步操作的成功和失败分别绑定相应的处理方法 状态： pending: 初始状态，既不是成功，也不是失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。...
判断对象是否为 Promise 对象
前端学习笔记
05-04 4034
错误原因：如果一个对象中有 then 属性，且该属性是函数，就会判断失败。Promise 有 then 方法，判断对象是否有 then 方法。对象，判断是否相等，如果相等，则说明是。判断对象原型是否为字符串。
Promise 对象
Geordies的博客
02-09 108
# Promise 对象 # Promise 的含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说，Promise 是一个对象，从它可以获...
从一道让我失眠的 Promise 面试题开始，深入分析 Promise 实现细节
wadfdhsajd的博客
09-18 230
我们都知道 Js 是单线程都，但是一些高耗时操作就带来了进程阻塞问题。同步模式（Synchronous）和异步模式（Asynchronous）。在异步模式下，创建异步任务主要分为宏任务与微任务两种。ES6 规范中，宏任务（Macrotask） 称为 Task， 微任务（Microtask） 称为 Jobs。宏任务是由宿主（浏览器、Node）发起的，而微任务由 JS 自身发起。宏任务与微任务的几种创建方式👇如何理解 script（整体代码块）是个宏任务呢🤔。
js代码-基于Promise对象实现Promise.all方法(Promise)
07-15
本篇文章将深入探讨如何基于Promise对象实现Promise.all方法，以及其工作原理和实际应用。 首先，我们需要了解Promise.all的基本概念。Promise.all接受一个Promise实例的数组作为参数，当这个数组中的所有Promise都...
简单实现异步编程promise模式
09-03
本篇文章主要介绍了异步编程promise模式的简单实现，并对每一步进行了分析,需要的朋友可以参考下
学习五、Promise
qq_40289624的博客
09-25 271
一、Promise的特征 1、Promise对象的then方法会返回一个全新的Promise对象。 2、后面的then方法就是在为上一个then返回的Promise对象注册回调。 3、前面的then方法中回调函数的返回值会作为后面then方法回调的参数。 4、如果回调中返回的是Promise，那么后面的then方法的回调就是为这个Promise注册的。 二、Promise的静态方法 1、Promise.resolve会将这个对象作为Promise执行 2、Promise.rejec...
js判断promise
weixin_43289557的博客
03-07 8030
function isPromise(obj) { return !!obj //有实际含义的变量才执行方法，变量null，undefined和''空串都为false && (typeof obj === 'object' || typeof obj === 'function') // 初始promise 或 promise.then返回的 &&...
简易Api--如何判断promise？对象？
Genus_的博客
12-31 1648
一些简单的方法~~ 判断是否为 promise function isPromise(val){ return val && typeof val.then ==='function' } 是否为对象 function isObeject(obj) { return obj != null && typeof obj === "object" } 首字母大写 function uppercaseFirst(string) { retur
实现 Promise 原理
Guojun19900715的博客
09-22 170
实现 Promise 原理 (实现部分常用方法) Promise的方法 resolove() 成功的回调函数, 参数为成功的返回值 reject() 失败的回调函数, 参数为失败的返回值 then() 链式调用 参数为 resolve() 和 reject() 回调函数 all() all方法, 参数为数组, 全部执行完才输出执行结果, 返回值为数组 race() race方法, 参数为数组(同all方法), 第一个执行完成,其他代码不再执行, 输出第一个执行结果 catch() catch执行过程
使用promise技术优化异步代码
weixin_44152684的博客
05-01 600
前提要点： 1、要了解promise首先我们要弄清楚什么是异步？ 同步：就是一件事一件事的执行。只有前一个任务执行完毕，才能执行后一个任务。 异步：是相对于同步而言的，就例如定时就是一个异步任务，当浏览器按顺序执行JavaScript的代码时，发现有个定时器，浏览器不会一直等，而是会直接跳过这个定时器去执行后面的代码，等代码都执行完毕后，再来执行定时器的代码！ *详细介绍可以点击链接：什么叫异步_普通网友的博客-CSDN博客_异步 2、什么情况下需要...
Promise全解析
qq_35218523的博客
01-31 776
1 为什么需要promise 需求 通过ajax请求id, 再根据id请求用户名, 再根据用户名获取email 回调地狱 在回调函数中嵌套回调 Promise解决了回调地狱 2 Promise的基本使用 Promise是一个构造函数, 通过new关键字实例化对象 语法 new Promise((resolve, reject)=>{}) Promise接受一个函数作为参数 在参数函数中接受两个参数 resolve: 成功函数 reject: 失败函数 promise实例 p
在Promise中存在setTimeout，执行顺序
yangaoyuan1999的博客
10-09 719
console.log(1); new Promise((resolve,reject)=>{ console.log(2); setTimeout(()=>{ console.log(3) new Promise((resolve)=>{ console.log(4); re...
Vue源码中怎么判断一个对象是否为Promise
freddy的博客
02-04 2109
废话不多说，请直接看源码： function isDef (v){ return v !== undefined && v !== null } function isPromise(val){ return ( isDef(val) && typeof val.then === 'function' && typeof val.catch === 'function' ) }
理解Koa源码：洋葱模型与Promise的运用
"这篇文章除了探讨Koa框架的洋葱型中间件机制，还涉及Promise在Koa源码中的应用。Koa是Node.js的一个轻量级框架，它的核心特性之一就是通过洋葱模型实现的中间件系统。文章首先介绍了Koa的目录结构，包括`...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值