Promise理解和使用

抽象表达

• Promise 是 JS 中进行异步编程的新的解决方案(旧的方式==>纯回调形式)

具体表达

• 从语法上讲：Promise 是一个构造函数
• 从功能上讲：Promise 对象用来封装一个异步操作并可以获取其结果

Promise 状态

• pending 状态：未确定的

• resolved 状态：成功的

• rejected 状态：失败的

• 说明：

  • 只有 2 个状态 resolved 和 rejected 状态，且一个 promise 对象只能改变一次
  • 无论成功还是失败，都会有一个结果数据
  • 成功的结果数据一般成为 value，失败的结果数据一般成为 reason

Promise 基本使用

<script>
      //1.创建一个新的promise对象
      const p = new Promise((resolve, reject) => {
        //执行器函数
        //2.执行异步操作
        setTimeout(() => {
          const time = Date.now();
          if (time % 2 == 0) {
            resolve("成功的数据,time=" + time);
          } else {
            reject("失败的数据，time=" + time);
          }
        }, 1000);
      });
      p.then(
         //onResolved回调
        (value) => console.log("成功的回调", value),
          //onRejected回调
        (reason) => console.log("失败的回调", reason)
      );
</script>

优点：

• 与传统指定回调函数形式更灵活

  • 传统回调函数必须在启动异步任务前指定
  • promise：启动异步任务=>返回 promise 对象=>给 promise 绑定回调函数(可以在异步函数启动后在指定回调函数也可以得到结果)

• 支持链式调用，可以解决回调地狱问题

  • 函数嵌套调用，不便于阅读和排错

  • promise 可以搭配 async/await 终极解决方案

Promise-API

• 官方文档

new Promise()

Promise（excutor）{}
excutor函数：同步执行（resolve，reject）=>{}
resolve函数：内部定义成功时我们调用的函数value=>{}reject函数：内部定义失败时我们调用的函数reason=>{}

• 说明：excutor 会在 Promise 内部立即同步回调，异步操作在执行器中执行

Promise.prototype.then()

Promise.prototype.then方法：（onResolved，onRejected）=>{}
onResolved函数：成功的回调函数（value）=>{}
onRejected函数：失败的回调函数（reason）=>{}

• 说明：指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的 promise 对象.

Promise.prototype.catch()

Promise.prototype.catch方法：（onRejected）=>{}
onRejected函数：失败的回调函数（reason）=>{}

• 说明：then（）的语法糖，相当于：then（undefined，onRejected）

Promise.resolve()

Promise.resolve方法：（value）=>{}
value：成功的数据或promise对象

• 说明：返回一个成功/失败的 promise 对象

Promise.reject()

Promise.reject方法：（reason）=>{}
reason：失败的原因

• 说明：返回一个失败的 promise 对象

Promise.all()

Promise.all方法：（promises）=>{}
promises：包含n个promise的数组

• 说明：返回一个新的 promise，只有所有的 promise 都成功才成功，只要有一个失败了就直接失败

Promise.race()

Promise.race方法：（promises）=>{}
promises：包含n个promise的数组

• 说明：返回一个新的 promise，第一个完成的 promise 的结果状态就是最终的结果状态

Promise 注意

如何改变 Promise 的状态

• resolve(value)：如果当前是 pending 就会编程 resolved
• rejected(reason)：如果当前是 pending 就会编程 rejected
• 抛出异常：如果当前是 pending 就会编程 rejected

<script>
      const p = new Promise((resolve, reject) => {
        // resolve(1); //成功状态
        // reject(2); //失败状态
        // throw new Error("出错了"); //抛出异常，promise变为rejected状态，reason为抛出的error，也可以使js报错抛出
        throw 3; //抛出异常 ,promise变为rejected失败状态，resaon为抛出的3
          // 以上如果不写，会执行最开始的一个，因为一个promise的状态只能改变一次
      });
      p.then(
        (value) => {
          console.log(value);
        },
        (reason) => {
          console.log(reason);
        }
      );
</script>

Promise 指定多个成功/失败回调

<script>
      const p = new Promise((resolve, reject) => {
        // throw new Error("出错了"); //抛出异常，promise变为rejected状态，reason为抛出的error，也可以使js报错抛出
        throw 3; //抛出异常 ,promise变为rejected失败状态，resaon为抛出的3
      });
      p.catch((reason)=>{
          console.log("第一个",reason);
      })
      p.catch((reason)=>{
          console.log("第二个",reason);
      })
	//第一个 3 第二个 3
</script>

自定义 Promise

async 与 await

async 官方文档

await 官方文档

async 函数

• 函数的返回值为 promise 对象
• promise 对象的结果由 async 函数执行的返回值决定

await 表达式

• await 右侧的表达式一般为 promise 对象，但也可以是其它的值
• 如果表达式是 promise 对象，await 返回的是 promise 成功的值
• 如果表达式是其它值，直接将此值作为 await 的返回值

注意：

• await 必须写在 async 函数中，但 async 函数中可以没有 await
• 如果 await 的 promise 失败了，就会抛出异常，需要通过 try…catch 来捕获处理