如何使用promise

这是我参与【第四届青训营】笔记创作活动的第4天。

1.3.1. API

0. 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) => {}

1.3.2. promise 的几个关键问题

0. 如何改变 promise 的状态?

(1) resolve(value): 如果当前是 pending 就会变为 resolved (2) reject(reason): 如果当前是 pending 就会变为 rejected (3) 抛出异常: 如果当前是 pending 就会变为 rejected

  //抛出异常
  let p = new Promise((resolve,reject)=>{
    throw '出了问题'
  })
  
  let p1 = Promise.resolve(521);
   // 如果传入的参数为 非Promise类型的对象，则返回的结果为成功promise对象
  // 如果传入的参数为  Promise对象，则参数的结果决定了 resolve的结果
  let p2 = Promise.resolve(new Promise((resolve, reject) => {
           // resolve('Ok');//p2为成功Promise对象，值为ok
           reject('Error');
      }))

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 对象

  p.then(value =>{
    console.log(111)
    //有且只有一个方式:返回一个pendding状态的promise对象
    return new Promise(()=>{});
  }).then(value =>{
    console.log(222);
  }).then(value =>{
    console.log(333);
  }).catch(reason =>{
    console.log(reason);
  })