【ES6】如何理解ES6中 Promise的?使用场景?

246 阅读2分钟

你是怎么理解ES6中 Promise的?使用场景?

作用/目的:

解决回调地狱,将多层嵌套操作改为链式操作,降低了编码难度,提升了代码的可读性 状态:有三种状态pending (进行中) fulfilled (已成功) rejected (已失败) 用法:Promise对象是一个构造函数,用来生成Promise实例

 const promise = new Promise(function(resolve, reject) {});

new Promise((resolve, reject)=>{resolve(value)}) resolve为成功,接收参数value,状态改变为fulfilled,不可再次改变。

new Promise((resolve, reject)=>{reject(reason)}) reject为失败,接收参数 reason,状态改变为rejected,不可再次改变。

实例方法:

then()-->实例状态发生改变的回调函数,第一个参数是resolved状态的回调函数,第二参数是rejected状态的回调函数,then方法返回的是一个新的Promise实例,也就是promise能链式书写的原因 catch()-->用于指定发生错误时的回调函数 finally()-->用于指定发生错误时的回调函数

构造函数方法:

Promise构造函数存在以下方法:

  • all()-->Promise.all()方法用于将多个 Promise实例,包装成一个新的 Promise实例
   const p = Promise.all([p1, p2, p3]);

特征: 只有p1p2p3的状态都变成fulfilledp的状态才会变成fulfilled 只要p1p2p3之中有一个被rejectedp的状态就变成rejected

  • race()-->Promise.race()方法同样是将多个 Promise 实例,包装成一个新Promise 实例 特征:只要p1p2p3之中有一个实例率先改变状态,p的状态就跟着改变

  • allSettled()-->romise.allSettled()方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例,只有等到所有这些参数实例都返回结果,不管是fulfilled还是rejected,包装实例才会结束

  • resolve()-->将现有对象转为 Promise对象

  • reject()-->Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected

  • try()

使用场景:

  • 将图片的加载写成一个Promise,一旦加载完成,Promise的状态就发生变化
  • 通过链式操作,将多个渲染数据分别给个then,让其各司其职。或当下个异步请求依赖上个请求结果的时候,我们也能够通过链式操作友好解决问题
  • 通过all()实现多个请求合并在一起,汇总所有请求结果,只需设置一个loading即可
  • 通过race可以设置图片请求超时