手書きの約束（2）

それなら実現は難しいと言われ、残りは簡単です

1.キャッチを実装する

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

キャッチも約束を返し、それに基づいて変更します

2. react（）および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.すべてとレースの実装

すべて：

// 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)
})

問題ありません

人種：

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

さて、Promiseのソースコードは終わりました

4.マクロタスク、ミクロタスク

マイクロタスク：約束

マクロタスク：タイマー

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が出力されます。新しいPomiseは同期されてから解決され、Promiseは成功し、次にダウンしてから、.then（console.log（console.log（ 3））マイクロタスクキューに入れます。この時点では、console.log（3）はまだ実行されておらず、console.log（4）はまだ順番になっておらず、出力5です。今回は、同期されたコードが最初に実行されました。マイクロタスクを見ると、出力3、3が実行され、それに続く4がマイクロタスクキューに入れられ、次に4が実行されます。マイクロタスクキューは空で、マクロタスクキュー1が実行されます。

2 5 3 4 1

おすすめ