Promise使用

88 阅读6分钟

Promise构造函数

Promise是一门新的Es6规范,是JS中进行异步编程的新解决方案。

举例异步操作:AJAX、定时器、fs文件操作、数据库操作。这些异步操作都是使用回调函数来操作。在异步操作中,我们需要在回调函数执行后获取结果来进行下一步操作,就导致回调函数中需求再嵌套回调函数,因为外部回调函数的异步执行结果是内部嵌套的回调的条件,这样的回调函数嵌套调用就是回调地狱

回调地狱:不便于阅读,不便于异常处理。

而Promise支持链式调用,可以解决回调地狱的问题。

Promise 优缺点

有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。

Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

Promise 实例对象

    // resolve 解决
    // reject 拒绝
    // 以上两个参数都是函数类型的数据
    const promise = new Promise((resolve, reject) => {
        // 在这函数体里面可以进行任何代码操作,在符合需求条件下去调用 resolve,不符合条件的情况去调用 reject。例如
        if(条件满足为 true){
            // 调用resolve 可以将任意值传递给回调函数
            resolve(value) // 将 promise 对象状态设置为 成功
        }else {
            //调用 reject 可以将任意值传递给回调函数
            reject(value) // 将 promise 对象状态设置为 失败
        }
    })
    
    // 在执行 promise 之后可以通过 .then来获取返回结果,.then接收两个回调函数为参数,第一个参数接收成功状态,第二个参数接收失败状态
    promise.then((value) => {
        // 成功的回调,这里的value就是成功传递过来的值
    }, (error) => {
        // 失败的回调,这里的error就是失败传递过来的值
    })
    // 当然也可以以下面这种方式获取成功和失败
    // .then 捕获成功状态 .catch 捕获失败回调
    promise.then(onFulfilled).catch(onRejected)

.then 方法

  • .then 方法返回的是一个新的 Promise 对象,因此可以采用链式写法。
  • 使用 then 方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。如果前一个回调函数返回的是Promise对象,这时后一个回调函数就会等待该Promise对象有了运行结果,才会进一步调用。
  • 且 then方法的参数是一个回调函数,而参数的返回值决定不同结果:
    • 返回了一个非Promise对象的值,那么 then 返回的 Promise 将会成为成功状态,并且将返回的值作为成功状态的回调函数的参数值。
    • 没有返回任何值,那么 then 返回的 Promise 将会成为成功状态,并且该成功状态的回调函数的参数值为 undefined
    • 抛出一个错误(throw 'value'),那么 then 返回的 Promise 将会成为失败状态,并且将抛出的错误作为失败状态的回调函数的参数值。
    • 返回一个是Promise对象,那么 then 返回的 Promise 的状态由返回值Promise对象的状态决定,并且将那个 返回值Promise对象 的回调函数的参数值作为该被返回的 Promise 的回调函数的参数值。
    • 返回一个未定状态(pending)的 Promise,那么 then 返回 Promise 的状态也是未定的,并且它的终态与那个 Promise 的终态相同;同时,它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。

.catch 方法

  • 用于指定发生错误时的回调函数。
  • Promise 对象的错误具有"冒泡"性质,会一直向后传递,直到被捕获为止。也就是说,错误只有 catch 语句捕获。
  • 可以理解为在链式调用时,不管前面有多少个 .then 的回调都不会执行,只会在遇到第一个 .catch 时被捕获错误
    // 
    promise.then().then().catch()

如何中断链式调用

  • 在需要中断的 .then 或者 .catch 的回调函数中返回值返回一个 pending 状态的 Promise实例对象
    promise.then().then(() => {
        // 返回一个 pending 状态的 Promise实例对象,使得后面想要捕获成功或者失败的回调无法被触发
        return new Promise(() => {})
    }).catch()

Promise 实例对象的属性

  • 属性1:ProniseState 是Promise的状态,
    • 1.只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
      • 也就是通过 resolve() 或 reject() 去改变状态
      • 如果不通过以上方法去改变状态,则对象状态会一直保持 pending。则成功或者失败的回调则不会被调用
      1. 一旦状态改变,就不会再变,任何时候都可以得到这个结果。
      • 可以理解为状态改变后任何地方,多次调用都会执行回调函数
    • pending 初始状态,不是成功或失败状态
    • resolved / fulfilled 成功
    • rejected 失败
  • 属性2:PromiseResult 是实例对象保存的值,也就是对象成功或者失败之后的结果,是通过以下两个函数传递给回调函数保存到实例对象中
    • resolve(value)
    • reject(value)

Promise 构造函数的方法

Promise.resolve(形参) 方法

  • let p = Promise.resolve(形参)
  • 调用方法传递的实参不是 Promise类型的实例对象,则返回的结果为成功状态的Promise实例对象
  • 调用方法传递的实参 Promise类型的实例对象,则实参的结果决定了resolve的结果

Promise.reject(形参) 方法

    • let p = Promise.reject(形参)
  • 调用方法不管传入的实参是什么类型数据,也会返回一个新的Promise实例,且实例的状态为都为rejected。

Promise.all(promises) 方法

  • 该方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
  • promises 是一个包含 n 个 Promise实例对象 的数组
  • let p = Promise.all([p1, p2, p3])
  • p 的状态由 p1、p2、p3 决定,分成两种情况。
    • (1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
    • (2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

Promise.race(promises) 方法

  • 该方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
  • let p = Promise.race([p1, p2, p3])
  • 上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的Promise实例的返回值,就传递给p的返回值。

如果Promise.all方法和Promise.race方法的参数,不是Promise实例,就会先调用下面讲到的Promise.resolve方法,将参数转为Promise实例,再进一步处理。