Promise是一种异步编程的解决方案,比传统的解决方案多了回调函数和事件。

Promise有pending、resolved、rejected三个状态;一旦状态改变,外界不可再改变状态。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promise</title>
  </head>
  <body></body>
  <script>
    // 8.Promise.prototype.all(),将多个Promise实例包装成一个新的Promise实例; const p = Promise.all([p1,p2,p3])
    //下面代码中,prmises包含有6个Promise实例的数组,只有这6个实例的状态都变成fulfilled,或者其中一个状态为rejected,
    //才会调用Promise.all方法后面的回调函数
    const promises = [1, 2, 3, 4, 5, 6].map(function (id) {
      return new Promise((resolve, reject) => {
        // resolve(id)
        if (id != 6) {
          resolve()
        } else {
          reject(new Error("id 6..."))
        }
      })
    })
    Promise.all(promises)
      .then((res1, res2) => {
        console.log("####", res1, res2)
      })
      .catch((err) => {
        console.log("@@@@", err)
      })

    // 7. Promise.prototype.finally(),不管Promise对象状态最后如何,都会执行。ES2018引入
    // promise.then().catch().finally()

    // 6. Promise.prototype.catch() == Promise.prototype.then(null,rejection) 或 Promise.prototype.then(undefined, rejection)
    // reject()方法作用,等同于抛出异常
    // const promise = new Promise((resolve, reject) => {
    //   // throw new Error("test")
    //   reject(new Error("test"))
    // })
    // promise.catch((err) => {
    //   console.log(err)
    // })

    // // 6.1. Promise状态已经转为resolved,再抛出错误是无效的---Promise状态一旦改变,就永久保持,无法改变
    // const promise1 = new Promise((resolve, reject) => {
    //   resolve("ok")
    //   reject(new Error("test"))
    // })
    // promise1
    //   .then((val) => {
    //     console.log(val)
    //   })
    //   .catch((err) => {
    //     console.log(err)
    //   })

    // // 6.2. Promise对象的错误具有“冒泡”性质,会一直向后传递,直至被捕获
    // // 下面代码共有三个Promise,一个p1产生、一个p2产生、还有一个then(),他们抛出的异常都会被catch()捕获
    // // 优先使用catch()方法,不要在then()方法里定义Reject状态的回调函数
    // const p1 = new Promise((resolve, reject) => {
    //   setTimeout(() => {
    //     // reject(new Error("errorp1"))
    //     resolve()
    //   }, 2000)
    // })
    // const p2 = new Promise((resolve, reject) => {
    //   // reject(new Error("error1"))
    //   // console.log(aObj)
    //   resolve()
    // })
    //   .then(() => {
    //     console.log(aObj)
    //     return p1
    //   })
    //   .catch((err) => console.log(err))

    // // 6.3 Promise 会吃掉错误。Promise内部的错误不会影响到Promise外部的代码;
    // // 下面代码中,someAsyncThing函数的Promise有一个错误,过两秒后还是会执行打印123
    // const someAsyncThing = function () {
    //   return new Promise((resolve, reject) => {
    //     resolve(x + 2)
    //   })
    // }
    // someAsyncThing().then(function () {
    //   console.log("everything is great")
    // })
    // setTimeout(() => {
    //   console.log(123)
    // }, 2000)

    // // 6.4 Promise对象的catch()方法返回的还是一个Promise对象,因此后面还可以接着调then()
    // // 下面代码执行,有报错会运行catch()的回调函数结束后会接着运行then()的回掉函数;若没有报错,则直接会跳过catch()方法
    // const someAsyncThing = function () {
    //   return new Promise((resolve, reject) => {
    //     // resolve(x + 2)
    //     resolve()
    //   })
    // }
    // someAsyncThing()
    //   .catch((error) => {
    //     console.log("oh on", error)
    //   })
    //   .then(() => {
    //     console.log("carry on")
    //   })

    // 5. Promise.prototype.then(),Promise实例具有then方法,即,then方法是定义在原型对象Promise.prototype上的
    // 第一个参数是resolved状态的回调函数,第二个参数是rejected状态的回调函数
    // then方法返回的是一个新的Promise实例(非原来的Promise实例),因此可以采用链式写法

    // // 4. 调用resolve和reject不会终结Promise的参数的执行
    // new Promise((resolve, reject) => {
    //   // 后面的语句还是会执行,并且会首先打印。因为立即resolved的Promise是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务
    //   resolve(1)
    //   // 使用return,后面的语句不会执行
    //   // return resolve(1)
    //   console.log(2)
    // }).then((v) => console.log(v))

    // // #3. resolve和reject可以返回参数
    // // p1的状态在3秒后从pending变成rejected
    // const p1 = new Promise((resolve, reject) => {
    //   console.log("p1")
    //   setTimeout(() => {
    //     reject(new Error("p1 fail..."))
    //   }, 3000)
    // })

    // // p2的状态在1秒后从pending变成resolved;从结果可以发现,要是p2返回了的是一个Promise,1秒后p2的状态还是pending,自己的状态无效了,由p1决定了p2的状态
    // const p2 = new Promise((resolve, reject) => {
    //   console.log("p2")
    //   setTimeout(() => {
    //     // 返回非Promise
    //     // resolve("p2 success...")
    //     // 返回Promise
    //     resolve(p1)
    //   }, 1000)
    // })

    // p2.then((result) => console.log("result", result)).catch((eror) =>
    //   console.log("eror", eror)
    // )

    // setTimeout(() => {
    //   console.log("@@@@p1:", p1)
    // }, 3000)

    // setTimeout(() => {
    //   console.log("@@@@p2:", p2)
    // }, 1000)

    // // #2. Promise一旦新建后就会立即执行,无法取消--- 打印结果为:Promise Hi! resolved.
    // let promise = new Promise((resolve, reject) => {
    //   // Promise新建后就会立即执行
    //   console.log("Promise")
    //   resolve()
    // })
    // promise.then(() => {
    //   console.log("resolved.")
    // })
    // console.log("Hi!")

    // // #1. Promise使用
    // function timeout(ms) {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(resolve, ms, "done")
    //   })
    // }
    // timeout(100).then((value) => {
    //   console.log(value)
    // })

    // // setTimeout的第三个参数
    // for (var i = 0; i < 6; i++) {
    //   setTimeout(() => {
    //     console.log(i)
    //   }, 1000)
    // }

    // for (var i = 0; i < 6; i++) {
    //   ;(function (j) {
    //     setTimeout(() => {
    //       console.log(j)
    //     }, 1000)
    //   })(i)
    // }

    // for (var i = 0; i < 6; i++) {
    //   setTimeout(
    //     (j) => {
    //       console.log(j)
    //     },
    //     1000,
    //     i
    //   )
    // }

    // function show(x, y, z) {
    //   console.log(x, y, z)
    // }
    // setTimeout(show, 100, 1, 2, 3)
  </script>
</html>

 

posted on 2018-10-22 17:26  阿梅M  阅读(184)  评论(0编辑  收藏  举报