手写 Promise (二)

then 实现据说是作难的，其余就简单了

1. 实现catch

catch (failFun) {
    return this.then(undefined, failFun)
  }

catch 也要返回一个Promise，在 then基础上改一下

2. reject() 和 resolve() 的实现

先说用法

Promise.reject(1) // 失败
Promise.resolve(2) // 成功
Promise.resolve(Promise.resolve(2)) // 成功
Promise.resolve(Promise.reject(2)) // 失败

resolve 可以传值，也可以传 Promise 对象，reject 只能传值，不能传Promise对象（文档这么说的）

// 返回一个失败的Promise
  static reject = (value) => {
    return new Promise((resolve, reject) => {
      reject(value)
    })
  }

  // 成功的回调 返回一个Promise
  static resolve = (value) => {
    return new Promise((resolve, reject) => { // 如果是Promise 将结果执行返回
      if (value instanceof Promise) {
        value.then(resolve, reject)
      } else { // 如果是值 直接返回
        resolve(value)
      }
    })
  }

使用：

window.Promise = new Promise
// let p = Promise.resolve(22)
// let p = Promise.resolve(Promise.resolve(2))
let p = Promise.resolve(Promise.reject(2))
p.then((res) => {
  console.log(res)
}, (error) => {
  console.log(error)
})

3. all 和 race 的实现

all：

// Promise.all 接受一个promise数组
  // 如果其中有一个执行失败 则整个失败 全部成功才算成功
  // 成功的返回值 是一个是数组，数组中是每一个promise的成功返回值，顺序与接受一个promise数组顺序一一对应
  // 并返回一个新的Promise
  static all = (promiseArr) => {
    let values = [] // 接受成功的 Promise 的返回值
    let successCount = 0 // 成功个数计数
    return new Promise((resolve, reject) => {
      // 遍历执行每个promise
      promiseArr.forEach((p, index) => {
        p.then((res) => {
          successCount++
          // 如果数组中的promise执行成功，按照传入的数组的顺序来，把返回值放入数组中
          values[index] = res
          // 每一个都成功的判断
          if (successCount === promiseArr.length) {
            resolve(values)
          }
        }, (error) => {
          reject(error) // 有一个失败 返回的新的promise视为失败
        })
      })
    })
  }

实验：


// 使用 实例化一个Promise 传入一个函数，这个函数有两个参数，每个参数也是一个函数
let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    var random = Math.random()
    if (random > 0.5) {
      resolve(`success: ${random}`)
    } else {
      reject(`fail: ${random}`)
    }
  }, 1000)
})
window.Promise = new Promise
let p1 = Promise.resolve('success 1')
let p2 = Promise.resolve(Promise.resolve('success 2'))
Promise.all([p, p1, p2]).then((res) => {
  console.log(res)
}, (error) => {
  console.log(error)
})

没问题 ok

race:

// race 也返回一个Promise, 谁先有结果就是谁
  static race = (promiseArr) => {
    return new Promise((resolve, reject) => {
      promiseArr.forEach((promiseItem) => {
        promiseItem.then((res) => {
          resolve(res)
        }, (error) => {
          reject(error)
        })
      })
    })
  }

好了，Promise 源码已经结束啦

4. 宏任务、微任务

微任务：Promise

宏任务：定时器

setTimeout(() => {
      console.log(1)
    }, 0)
    new Promise((resolve) => {
      console.log(2)
      resolve()
    }).then(() => {
      console.log(3)
    }).then(() => {
      console.log(4)
    })
    console.log(5)

代码从上向下看，setTimeout 放入宏任务对列，遇见Promise，先输出2，new Pomise 里面是同步的，然后resolve，Promise成功了，再向下后面then，将 .then （console.log(3)）放入微任务对列，这个时候 console.log(3) 还没执行呢，还没轮到console.log（4），再向下输出 5，这个时候同步的代码已经执行完了，先看微任务，输出3， 3 执行了，跟在其后面的4放入微任务队列，然后，执行4，微任务队列空了，执行宏任务队列 1

2 5 3 4 1

猜你喜欢