三

最新推荐文章于 2023-04-07 17:38:04 发布

*Major*

最新推荐文章于 2023-04-07 17:38:04 发布

阅读量274

点赞数

本文链接：https://blog.csdn.net/qq_41375318/article/details/103982983

版权

三

19.自定义Promise_说明
20.自定义Promise_整体结构
21.自定义Promise_构造函数实现1
22.自定义Promise_构造函数实现2
23.自定义Promise_构造函数测试和完善
24.自定义Promise_then方法实现1
25.自定义Promise_then方法实现2
26.自定义Promise_then方法实现3
27.自定义Promise_then方法测试和完善
28.自定义Promise_then方法实现(第2遍)
29.自定义Promise_Promise的resolve和reject方法
30.自定义Promise_Promise的all方法
31.自定义Promise_Promise的race方法
32.自定义Promise_完善all和race方法
33.自定义Promise_Promise的resolveDelay和rejectDelay方法
34.自定义Promise_class版本

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>08_自定义Promise</title>
</head>

<body>
  <script src="./lib/Promise_class.js"></script>
  <!-- <script>
    const p = new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve(1)
        reject(2)
        console.log('reject()改变状态之后')
      }, 100);
    })
    p.then(
      value => {
        console.log('onResolved1()', value)
      },
      reason => {
        console.log('onRejected1()', reason)
      }
    )
    p.then(
      value => {
        console.log('onResolved2()', value)
      },
      reason => {
        console.log('onRejected2()', reason)
      }
    )
    
  </script> -->
<!-- 
  <script>
    const p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1)
        // reject(2)
      }, 100);
    }).then(
      value => {
        console.log('onResolved1()', value)
      },
      reason => {
        console.log('onRejected1()', reason)
        // return 3
        // throw 4
        return new Promise((resolve, reject) => reject(5))
      }
    ).then(
      value => {
        console.log('onResolved2()', value)
      },
      reason => {
        console.log('onRejected2()', reason)
        throw 6
      }
    ).catch(reason => {
      console.log('onRejected3()', reason)
      return new Promise(() => {})  // 中断proimise链
    }).then(
      value => {
        console.log('onResolved4()', value)
      },
      reason => {
        console.log('onRejected4()', reason)
        throw 6
      }
    )
    
  </script> -->

  <script>
    const p1 = Promise.resolve(2) // 如果是一般值, p1成功, value就是这个值
    const p2 = Promise.resolve(Promise.resolve(3)) // 如果是成功的promise, p2成功, value是这个promise的value
    const p3 = Promise.resolve(Promise.reject(4)) // 如果是失败的promise, p3失败, reason是这个promise的reason
    // p1.then(value => {console.log('p1', value)})
    // p2.then(value => {console.log('p2', value)})
    // p3.catch(reason => {console.log('p3', reason)})

    // const p4 = new Promise((resolve) => {
    //   setTimeout(() => {
    //     resolve(5)
    //   }, 1000);
    // })
    const p4 = Promise.resolveDelay(5, 1000)
    const p5 = Promise.reject(6)
    
    const pAll = Promise.all([p4, 7, p1, p2])
    pAll.then(
      values => {
          console.log('race onResolved()', values)
      },
      reason => {
          console.log('race onRejected()', reason)
      }
    )

    // const pRace = Promise.race([p4, 7, p5, p2, p3])
    // pRace.then(
    //   value => {
    //       console.log('race onResolved()', value)
    //   },
    //   reason => {
    //       console.log('race onRejected()', reason)
    //   }
    // )

    const p6 = Promise.resolveDelay(66, 2000)
    const p7 = Promise.rejectDelay(77, 3000)
    p6.then(value => {console.log('p6', value)})
    p7.catch(reason => {console.log('p7', reason)})
  </script>
</body>

</html>