Promise

81 阅读5分钟

什么是Promise

Promise是JS中进行异步编程的新的解决方案

● promise 是一个构造函数

● Promise 的构造函数接收一个函数为参数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

为什么要用Promise

1.  指定回调函数的方法更加灵活

2.  支持链式调用 ,可以解决回调函数问题

Promise 的状态改变

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

pending -->  resolved  `[成功后调用]`
pending -->  rejected  `[失败后调用]` 

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

成功的结果数据一般称为value(val), 

失败的结果数据一般称为 reason(res)

Promise 方法

基础定义

Promise 构造函数: Promise (excutor) {} 

excutor 函数: 同步执行 (resolve, reject) => {}

resolve 函数: 内部定义成功时我们调用的函数 value => {} 

reject 函数: 内部定义失败时我们调用的函数 reason => {} 

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

pomise基本使用

const p1 = new Promise((resolve, reject) => {

  //此部分为同步部分

  //此部分决定Promise的状态,未决定之前为Padding不能进行后续对该Promise的处理

  //resolve和reject只能接受和传递一个参数

  //resolve将Promise对象推入已处理状态

  //reject将Promise对象推入已拒绝状态

  resolve("请求成功");

  //状态一旦改变就不可以更改

  //reject('请求失败')

});
p1.then(

  (value) => {

    //此部分为onFulfilled,也就是thenabled处理,Promise状态为resolved接收参数并执行此部分代码。

    console.log(`Promise已处理,接收到传值:${value}`);

  },

  (err) => {

    //此部分为onRejected,也就是catchabled处理,Promise状态为reject接收参数并执行此部分代码。

    //Promise对象的then方法调用中也可以不写此部分,不进行错误处理,在Promise对象的catch方法中进行错误处理。

    console.log(`Promise已拒绝,接收到原因:${err}`);

  }

);

 //处理Promise的结果,为异步部分。

//若对应的promise为pending,则会加入作业队列,等待Promise结果。

//若Promise结果为resolved或rejected,加入微任务队列等待执行JS引擎轮询到立马执行。


 //Promise并没有消除回调,只是让回调变得可控了。

1.then 方法:

说明:.then() 方法用来预先指定成功和失败的回调函数,调用 .then() 方法时,成功的回调函数是必选的,失败的回调函数是可选的

返回一个新的 promise 对象

Promise.prototype.then(onResolved, onRejected) => {}

onResolved 函数: 成功的回调函数 (value) => {} 

onRejected 函数: 失败的回调函数 (reason) => {} 

2.catch 方法:

说明:.catch() 方法用来捕获与处理错误 ,相当于 then(undefined, onRejected);

返回一个 失败 的 promise 对象

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

3.  Promise.resolve 方法:

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

Promise.resolve(value) => {} 

value: 成功的数据或 promise 对象

4.  Promise.reject 方法:

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

Promise.reject(reason) => {} 

reason: 失败的原因  

5.Promise.all 方法:

说明:只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败;

返回一个新的 promise(成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值)

Promise.all(promises) => {} 

promises: 包含 n 个 promise 的数组 

6.Promise.race 方法:

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

Promise.race(promises) => {} 

promises: 包含 n 个 promise 的数组 Promise关键问题

1. 如何改变 promise 的状态?

1.  resolve(value): 如果当前是 pendding 就会变为 resolved

2.  reject(reason): 如果当前是 pendding 就会变为 rejected

3.  抛出异常: 如果当前是 pendding 就会变为 rejected

2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?

当 promise 改变为对应状态时都会调用

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

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

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

● 在执行器中直接调用 resolve()/reject()

● 延迟更长时间才调用 then()

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

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

● 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

4. promise.then() 返回的新 promise 的结果状态由什么决定?

1.  简单表达: 由 then()指定的回调函数执行的结果决定

2.  详细表达:

● 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常

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

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

5. promise 如何串连多个操作任务?

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

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

6. promise 异常传透?

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

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

7. 中断 promise 链?

1.  当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数

2.  办法: 在回调函数中返回一个 pendding 状态的 promise 对象

总结

● Promise是JS中进行异步编程的新的解决方案

● new 出来的 Promise 实例对象,代表一个 异步操作

● 每一次 new Promise() 构造函数得到的实例对象,都可以通过原型链的方法访问到.then方法

● 一个 promise 对象只能改变一次 ,一般为 padding 转为 resolved 或 padding 转为 rejected