Promise

Promise是什么？

        promises是一套专门处理异步场景的规范，它能有效的避免回调地狱的产生，使异步代码更加清晰、简洁、统一。

promise　Ａ＋　的规定：

        １.所有的异步场景，都可以看作一个异步任务，每个异步任务，在js中应该表现为一个对象，该对象称之为Promise对象，也叫任务对象。

        2 .每个任务对象都应该有两个阶段、三个状态，=>未决阶段：挂起状态（pending） 

        已决阶段：完成状态（fulfilled） 失败状态（rejected）

        3.挂起 => 完成，称之为resolve；挂起 => 失败称之为reject。任务完成时，可能会有一个相关数据，任务失败时可能会有一个失败原因。  
     

Promise API

promise的基本使用

const pro = new Promise((resolve, reject) => {
    console.log("立即执行函数");

    if (Math.random() > 0.5) {
        resolve("成功");
    } else {
        reject("失败");
    }
});

pro.then((data) => {
    console.log("Promise resolved:", data);
}, (error) => {
    console.log("Promise rejected:", error);
});

catch的使用

 new Promise((resolve, reject) => { 
    reject(new Error('出错了'))

 }).then(null, (err) => { 
     console.log(err)
 })
//等价于下面代码
new Promise((resolve, reject) => {
    reject(new Error('出错了'))

}).catch((err) => {
    console.log(err)
})

       

链式调用

1. then方法必定返回一个新的promise

2.新任务的状态取决与后续处理

• 若没有相关的后续处理，新任务的状态跟前任务一致，数据为前任务的数据
• 若有后续处理但还未执行，新任务挂起。
• 若后续

1.1 理解

​ 1.抽象表达：

​         1）promise是一门新的技术（ES6语言规范）

​         2）promise是js进行异步编程的新解决方案

        旧方案是单纯使用回调函数

​ 2.具体表达

​         1）从语法上来说Promise是一个构造函数，

        ​ 2） 从功能上来说：promise对象用来封装一个异步操作并可以获取成果 失败的结果值

异步编程：fs文件炒作， 数据库操作，AJAX，定时器

2.2为什么要用Promise

​ 2.2.1指定回调函数的方法更加灵活

​ 1）旧的：必须在指定任务前指定

​ 2）promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数。

​ 2.2.2 支持链式调用可以解决回调地狱问题 1）什么是回调地狱? 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函数执行的条件

​ 2）回调地狱的缺点? 不便于阅读 / 不便于异常处理 解决方案? promise 链式调用 终极解决方案? async/await

promise的状态：

​ pending： 未定义的

1.3. 如何使用 Promise?1.3.1. API

1. Promise 构造函数: Promise (excutor) {}(1) executor 函数: 执行器 (resolve, reject) => {}(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

2. Promise.prototype.then 方法: (onResolved, onRejected) => {}(1) onResolved 函数: 成功的回调函数 (value) => {}(2) onRejected 函数: 失败的回调函数 (reason) => {}说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的 promise 对象

3. Promise.prototype.catch 方法: (onRejected) => {}(1) onRejected 函数: 失败的回调函数 (reason) => {}

4. Promise.resolve 方法: (value) => {}(1) value: 成功的数据或 promise 对象说明: 返回一个成功/失败的 promise 对象

   ​ 1.1如果传入为非promise对象 返回的结果为成功的promise对象

     let p2 = Promise.resolve(521)
     console.log(p2);

   1.2如果传入为一个promise对象 ，则参数的结果决定了 resolve的结果

     
         let p3 = Promise.resolve(new Promise((resolve, reject) => {
           // resolve('p3成功')
           reject('p3失败')
         }))
     console.log(p3); //rejected

   ​

5. Promise.reject 方法: (reason) => {}(1) reason: 失败的原因说明: 无论传入的是一个promise对象或者不是返回的都是一个失败的 promise 对象

     //返回一个失败的 promise 对象
     const p4 = Promise.reject(520)
     console.log(p4);//rejected
     ​
     const p5 = Promise.reject(new Promise((resolve,reject)=>{
       resolve('p5成功')
       // reject('p5失败')
     }))
     console.log(p5); //rejected

   ​

6. Promise.all 方法: (promises) => {}(1) promises: 包含 n 个 promise 的数组说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败

     
      const p6 = new Promise((resolve,reject)=>{
       resolve('p6成功')
      })
      const p7 = Promise.resolve('hello cui')
      const p8 = Promise.resolve('hello chen')
     ​
     const result = Promise.all([p6,p7,p8])
     console.log(result); //fulfilled 
     ​

   ​

7. Promise.race 方法: (promises) => {}(1) promises: 包含 n 个 promise 的数组说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

     
     const p9 = new Promise((resolve,reject)=>{
       resolve('p9成功')
     })
     const p10 = Promise.resolve('zhi')
     const p11 = Promise.resolve('zhii')
     const race = Promise.race([p9,p10,p11])
     console.log(race); //fulfilled

   ​

1.3.2. promise 的几个关键问题

1. 如何改变 promise 的状态?(1) resolve(value): 如果当前是 pending 就会变为 resolved(2) reject(reason): 如果当前是 pending 就会变为 rejected(3) 抛出异常: 如果当前是 pending 就会变为 rejected

2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?当 promise 改变为对应状态时都会调用

3. 改变 promise 状态和指定回调函数谁先谁后?(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调(2) 如何先改状态再指定回调?① 在执行器中直接调用 resolve()/reject()② 延迟更长时间才调用 then()(3) 什么时候才能得到数据?① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

4. promise.then()返回的新 promise 的结果状态由什么决定?(1) 简单表达: 由 then()指定的回调函数执行的结果决定(2) 详细表达:① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常

     
     const p12 = new Promise((resolve,reject)=>{
       resolve('okkk')
     })
     const esc = p12.then((value)=>{
       throw '有个问题'
     },(reason)=>{
     ​
     })
     console.log(esc)// rejected

   ② 如果返回的是非promise的任意值, 新promise变为resolved, value为返回的值

     
     const p13 = new Promise((resolve,reject)=>{
       resolve('okkk')
     })
     const number = p13.then((value)=>{
       return 521
     },(reason)=>{
     ​
     })
     console.log(number)// fulfilled

   ③ 如果返回的是另一个新promise, 此promise的结果就会成为新promise的结果

     
     const p14 = new Promise((resolve,reject)=>{
       resolve('okkk')
     })
     const obj = p14.then((value)=>{
       return new Promise((resolve,reject)=>{
         // resolve('obj成功')
         reject('obj失败')
       })
     },(reason)=>{
     ​
     })
     console.log(obj)// rejected

   ​

5. promise 如何串连多个操作任务?(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用(2) 通过 then 的链式调用串连多个同步/异步任务

     
     const p15 = new Promise((resolve, reject) => {
           resolve('p15成功')
         })
         p15.then(value => {
           return new Promise((resolve, reject) => {
             resolve('sucess')
           })
         }).then(value => {
           console.log(value); //sucess
         }).then(value => {
           console.log(value); // undefind  因为前面的then没有return ，就是return undefined
         })

   ​

   ​

6. promise 异常传透?(1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,(2) 前面任何操作出了异常, 都会传到最后失败的回调中处理

     
        const p16 = new Promise((resolve,reject)=>{
           reject('p16成功')
         })
         p16.then(value => {
           console.log(111);
         }).then(value => {
           console.log(222);
         }).then(value => {
           console.log(333);
         }).catch(reason =>{
           console.warn(reason);
         })

   ​

7. 中断 promise 链?(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

     
     const p17 = new Promise((resolve,reject)=>{
           // reject('p16失败')
           resolve('p17成功')
         })
         p16.then(value => {
           console.log(111111);
           return new Promise(()=>{})
         }).then(value => {
           console.log(222222);
         }).then(value => {
           console.log(333333);
         }).catch(reason =>{
           console.warn(reason);
         })

   ​

promise的状态只能改变一次

• 3.2. async 函数

• 函数的返回值为 promise 对象

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

• 3.3. await 表达式

• await 右侧的表达式一般为 promise 对象, 但也可以是其它的值

• 如果表达式是 promise 对象, await 返回的是 promise 成功的值

• 如果表达式是其它值, 直接将此值作为 await 的返回值

• 3.4. 注意

• await 必须写在 async 函数中, 但 async 函数中可以没有 await

• 如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理