【JS高级】Promise

什么是Promise

*promise内部代码会同步执行(如果不加异步任务)

.then中的代码是异步执行的

1. 抽象表达
   1. Promise是一门新的技术(ES6规范)
   2. Promise是JS中进行异步编程的新解决方案
   3. 备注:旧方案是单纯使用回调函数
2. 具体表达
   1. 从语法上来说: Promise是一个构造函数
   2. 从功能上来说: promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

特点：支持链式调用，可以解决回调地狱问题 -----面试常考

回调地狱

promise构造函数有两个参数，分别为resolve，reject，resolve表示成功

会进入.then(()=>{},()=>{})中的第一个方法，reject会进入第二个方法/或者catch

new Promise((resolve,reject)=>{
  // 内包裹异步任务
})

Promise封装练习

使用

Promise封装练习

function sendAjax(url) {
      return new Promise((resolve, reject) => {
        axios("get", url, (err, result) => {
          if (err) {
            reject(err);
          }
          resolve(result);
        });
      });
    }
    
    
    sendAjax("http://127.0.0.1").then(
      (result) => {
        console.log(result);
      },
      (err) => {
        console.log(err);
      }
    );

promise状态的改变

状态：实例对象中的一个属性------Promisetate

• pending 未决定的
• resolved / fullfilled 成功
• rejected 失败

1. pending变为resolved
2. pending变为rejected

说明:只有这2中，且一个promise对象只能改变一次

	无论变为成功还是失败，都会有一个结果数据

	成功的结果一般成为value，失败的结果一般称为reason

Promise对象的值----PromiseResult

保存着对象【成功/失败】的结果

resolve（xxx）

reject（xxx）

以上均可修改PromiseResult的值

promise的工作流程

Promise.resolve()方法

Promise.reject()方法

传入的任何值都为错误

Promise.all()方法

说明:返回一个新的promise，只有所有的 promise都成功才成功，只要有一个失败了就直接失败，成功的值为一个数组，保存着每一个promise的结果值

只要有一个失败，返回结果就为失败的Promise的结果

Promise.race()方法

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

Promise的几个关键问题

改变其状态的三种方式

若为其实例指定多个.then回调函数，那么所有的回调函数都会执行

改变promise状态和指定回调函数谁先谁后

1)都有可能，正常情况下是先指定回调再改变状态，但也可以先改状态再指定回调

(2)如何先改状态再指定回调?

• 在执行器中直接调用resolve()/reject()
• 延迟更长时间才调用then()

(3)什么时候才能得到数据?

• 如果先指定的回调，那当状态发生改变时，回调函数就公调用，得到数据
• 如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据

promise如何串连多个操作任务

(1)promise 的then()返回一个新的 promise, 可以看成then()的链式调用

(2)通过 then的链式调用串连多个同步/异步任务

promise的异常传透

(1)当使用promise 的then链式调用时，可以在最后指定失败的回调，

(2)前面任何操作出了异常，都会传到最后失败的回调中处理

promise的中断

自定义（手写）promise

https://www.bilibili.com/video/BV1GA411x7z1?p=28&spm_id_from=pageDriver&vd_source=9be15c346432f1064d85ec92b746747f

Async与await

Async

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

Await

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

注意

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

await与async结合使用