es6基础0x023：Promise

0x000 概述

Promise是一个异步编程的解决方案，他经常和ajax一起出现，导致很多人以为Promise是一种新的网络请求技术，其实不然。Promise是一种思考方式、编程方式。

0x000 栗子

先写一个栗子

setTimeout(()=>{
    console.log('here')
},3000)

很简单，3s之后将会打印出here，现在换成Promise：

new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
}).then(()=>{
    console.log('here')
})

执行结果也是一样，3s之后将会输出here，还可以这么写

let proxy=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
})

setTimeout(()=>{
    proxy.then(()=>{
        console.log('here')
    })
}, 10000)

13s后才输出here

0x002 初始化

• 语法

  new Promise(executor)

  • 参数：

    • executor：处理器函数，函数的完整签名是(resolve, reject)=>{}
  • 返回值：一个Promise实例

• 栗子

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          resolve()
      }, 3000)
  })
  console.log(promise) // Promise {<pending>}

• 说明：
  使用new Promise实例化一个Promise之后，将它输出出来，可以看到他有一个pending，这是说明这个promise的状态，称为PromiseStatus，promise一共有3种状态，一个promise必定处于下面三个状态之一：

  • pending：初始状态
  • fulfilled：操作成功
  • rejected：操作失败

0x003 then

• 语法：

  promise.then(onFulfilled, onRejected)

  • onFulfilled：操作成功的回调
  • onRejected：操作失败的回调

• 栗子1：

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          resolve()
      }, 3000)
  })
  console.log(promise) // Promise {<pending>}
  promise.then(()=>{
      console.log(promise) // Promise {<resolved>: undefined}
  })

• 说明1：
  当调用resolve之后，then函数执行了，同时promise的PromiseStatus变成了resolved。onFulfilled同时接受一个变量，称之为PromiseValue：

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          resolve(1)
      }, 3000)
  })
  promise.then((value)=>{
      console.log(value) // 1
  })

• 栗子2:

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          reject()
      }, 3000)
  })
  console.log(promise) // Promise {<pending>}
  promise.then(()=>{},()=>{
      console.log(promise) // Promise {<rejected>: undefined}
  })

  当调用reject之后，then执行了，此时promise的PromiseStatus变成了rejected，同时，onRejected回调接受一个reason，作为操作失败的原因说明：

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          reject('nothing')
      }, 3000)
  })
  promise.then(()=>{},(reason)=>{
      console.log(reason) // nothing
  })

0x004 catch

• 语法：

  promise.catch(onRejected)

  • onRejected：回调

• 栗子：

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          resolve()
      }, 3000)
  }).then(()=>{
      throw 'error'
  }).catch((e)=>{
      console.log(`i catch you: ${e}`) // i catch you error 
  })

• 注意1：在异中的错误不会执行catch

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          throw 'error'
      }, 3000)
  }).catch((e)=>{
      console.log(`i catch you: ${e}`) // Uncaught error 
  })

• 注意2：resolve之后会被忽略

   let promise=new Promise((resolve, reject)=>{
      resolve()
      throw 'error'
  }).catch((e)=>{
      console.log(`i catch you: ${e}`)  // 不会输出
  }) 
  

0x005 finally

• 语法：

  p.finally(onFinally)

  • onFainally：回调

• 栗子：

  let promise=new Promise((resolve, reject)=>{
      setTimeout(()=>{
          resolve()
      }, 3000)
  }).then(()=>{
      console.log('resolve')
      throw 'error'
  }).catch((e)=>{
      console.log(`i catch you: ${e}`)
  }).finally(()=>{
      console.log('finally')
  })
  // resolve
  // i catch you error
  // finally