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