Promise

113 阅读2分钟

概念

image.png Promise是处理异步任务的主要解决方案,避免了地狱回调问题,它本身是一个构造函数可以实例化,可以通过new关键字生成,Promise接收一个函数作为参数,并且参数中含有两个数据类型resolve和reject,然后本身就是处理异步任务的方法,成功则会调用resolve失败则调用reject函数,然后再通过.then方法对回调的结果进行处理。

image.png

image.png

API

1.Promise构造函数: Promise (excutor) {} excutor函数: 同步执行 (resolve, reject) => {} resolve函数: 内部定义成功时我们调用的函数 value => {} reject函数: 内部定义失败时我们调用的函数 reason => {} 说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行

2.Promise.prototype.then方法: (onResolved, onRejected) => {} onResolved函数: 成功的回调函数 (value) => {} onRejected函数: 失败的回调函数 (reason) => {} 说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调 返回一个新的promise对象

3.Promise.prototype.catch方法: (onRejected) => {} onRejected函数: 失败的回调函数 (reason) => {} 说明: then()的语法糖, 相当于: then(undefined, onRejected)

4.Promise.resolve方法: (value) => {} value: 成功的数据或promise对象 说明: 返回一个成功/失败的promise对象

5.Promise.reject方法: (reason) => {} reason: 失败的原因 说明: 返回一个失败的promise对象

6.Promise.all方法: (promises) => {} promises: 包含n个promise的数组 说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败

7.Promise.race方法: (promises) => {} promises: 包含n个promise的数组 说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态

new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve('成功的数据')
        reject('失败的数据')
    }, 1000)
  }).then(
    value => {
        console.log('onResolved()1', value)
    }
  ).catch(
    reason => {
        console.log('onRejected()1', reason)
    }
  )

   // 产生一个成功值为1的promise对象
   const p1 = new Promise((resolve, reject) => {
       setTimeout(() => {
        resolve(1)
       }, 100);
   })
   const p2 = Promise.resolve(2)
   const p3 = Promise.reject(3)
//    p1.then(value => {console.log(value)})
//    p2.then(value => {console.log(value)})
//    p3.catch(reason => {console.log(reason)})

//    const pAll = Promise.all([p1, p2, p3])
   const pAll = Promise.all([p1, p2])
   /* pAll.then(
     values => {
        console.log('all onResolved()', values)
     },
     reason => {
        console.log('all onRejected()', reason)
     }
   )
 */
   const pRace = Promise.race([p1, p2, p3])
   pRace.then(
     value => {
        console.log('race onResolved()', value)
     },
     reason => {
        console.log('race onRejected()', reason)
     }
   )