基本使用

  1. // Promise 基本示例
  3. const promise = new Promise(function (resolve, reject) {
  5.   // 这里用于“兑现”承诺
  7.   resolve(100) // 承诺达成
  8.   // reject(new Error('promise rejected')) // 承诺失败
  9. })
  11. promise.then(function (value) {
  12.   // 即便没有异步操作，then 方法中传入的回调仍然会被放入队列，等待下一轮执行
  13.   console.log('resolved', value)
  14. }, function (error) {
  15.   console.log('rejected', error)
  16. })
  18. console.log('end')

封装ajax

  1. // Promise 方式的 AJAX
  3. function ajax (url) {
  4.   return new Promise(function (resolve, reject) {
  5.     var xhr = new XMLHttpRequest()
  6.     xhr.open('GET', url)
  7.     xhr.responseType = 'json'
  8.     xhr.onload = function () {
  9.       if (this.status === 200) {
  10.         resolve(this.response)
  11.       } else {
  12.         reject(new Error(this.statusText))
  13.       }
  14.     }
  15.     xhr.send()
  16.   })
  17. }
  19. ajax('/api/urls.json').then(function (res) {
  20.   console.log(res)
  21. }, function (error) {
  22.   console.log(error)
  23. })

链式调用

then方法是promise对象状态明确后的回调，他会返回一个新的promise。

  • 如果在then方法中手动返回了一个promise对象，那么下一个then就是这个promise对象状态明确后的回调
  • 如果在then方法中手动返回了一个值，这个值会被下一个then当做promise返回的值接收（即便返回的这个值是throw的error也会进入onResolved回调，error成为value）
  • 如果在then方法中没有返回，那么下一个then就会收到一个undefined ```javascript // Promise 链式调用

function ajax(url) { return new Promise(function (resolve, reject) { var xhr = new XMLHttpRequest() xhr.open(‘GET’, url) xhr.responseType = ‘json’ xhr.onload = function () { if (this.status === 200) { resolve(this.response) } else { reject(new Error(this.statusText)) } } xhr.send() }) }

// var promise = ajax(‘/api/users.json’)

// var promise2 = promise.then( // function onFulfilled (value) { // console.log(‘onFulfilled’, value) // }, // function onRejected (error) { // console.log(‘onRejected’, error) // } // )

// console.log(promise2 === promise) // false

/ NOTE then方法是promise对象状态明确后的回调，他会返回一个新的promise 如果在then方法中手动返回了一个promise对象，那么下一个then就是这个promise对象状态明确后的回调 如果在then方法中手动返回了一个值，这个值会被下一个then当做promise返回的值接收（即便这个值是throw的error也会进入onResolved回调，error成为value） 如果在then方法中没有返回，那么下一个then就会收到一个undefined / ajax(‘/api/users.json’) .then(function (value) { console.log(1111) console.log(value) return ajax(‘/api/urls.json’) }) // => Promise .then(function (value) { console.log(2222) console.log(value) return ‘foo’ }) // => Promise .then(function (value) { console.log(3333) console.log(value) return new Error(‘error’) }) // => Promise .then(function (value) { console.log(4444) console.log(value) }) // => Promise .then(function (value) { console.log(5555) console.log(value) // return setTimeout(function () { // console.log(‘异步’) // }, 1000) return new Promise((resolve,reject)=>{ setTimeout(function () { console.log(‘异步’) resolve(‘异步’) }, 1000) }) }).then(function (value) { console.log(6666) console.log(value) }).catch(e => { console.log(e) })

/ 1111 [{age: 24,name: “zce”},{age: 25,name: “alan”}] 2222 {users: “/api/users.json”, posts: “/api/posts.json”} 3333 foo 4444 Error: error 5555 undefined /

  1. <a name="r99Zh"></a>
  2. ## 异常处理
  3. <a name="uVfXw"></a>
  4. ### 使用 onRejected 注册失败回调
  5. then中注册的onRejected回调只是给当前 Promise 对象注册的失败回调，只能捕获当前promise的异常<br />then(onRejected) 实际上就相当于 then(undefined, onRejected)
  6. ```javascript
  7. function ajax(url) {
  8.   return new Promise(function (resolve, reject) {
  9.     var xhr = new XMLHttpRequest()
  10.     xhr.open('GET', url)
  11.     xhr.responseType = 'json'
  12.     xhr.onload = function () {
  13.       if (this.status === 200) {
  14.         resolve(this.response)
  15.       } else {
  16.         reject(new Error(this.statusText))
  17.       }
  18.     }
  19.     xhr.send()
  20.   })
  21. }
  23. ajax('/api/users11.json')
  24.   .then(function onFulfilled(value) {
  25.     console.log('onFulfilled', value)
  26.   }, function onRejected(error) {
  27.     console.log('onRejected', error)
  28.   })

使用 catch 注册失败回调

使用 catch 注册失败回调是更常见的(这里的catch并不是try catch中的catch！)
因为 Promise 链条上的任何一个异常都会被一直向后传递，直至被捕获，分开注册的 onRejected 相当于给整个 Promise 链条注册失败回调

  1. function ajax(url) {
  2.   return new Promise(function (resolve, reject) {
  3.     var xhr = new XMLHttpRequest()
  4.     xhr.open('GET', url)
  5.     xhr.responseType = 'json'
  6.     xhr.onload = function () {
  7.       if (this.status === 200) {
  8.         resolve(this.response)
  9.       } else {
  10.         reject(new Error(this.statusText))
  11.       }
  12.     }
  13.     xhr.send()
  14.   })
  15. }
  17. // NOTE 使用 catch 注册失败回调是更常见的
  18. ajax('/api/users11.json')
  19.   .then(function onFulfilled (value) {
  20.     console.log('onFulfilled', value)
  21.   })
  22.   .catch(function onRejected (error) {
  23.     console.log('onRejected', error)
  24.   })

全局捕获 Promise 异常

我们可以在全局对象上注册一个unhandledrejection事件，用来处理那些没有被手动捕获的promise异常

  1. // window 中全局捕获 Promise 异常，类似于 window.onerror，
  2. window.addEventListener('unhandledrejection', event => {
  3.   const { reason, promise } = event
  5.   console.log(reason, promise)
  6.   // reason => Promise 失败原因，一般是一个错误对象
  7.   // promise => 出现异常的 Promise 对象
  9.   event.preventDefault()
  10. }, false)
  12. // Node.js 中使用以下方式
  13. process.on('unhandledRejection', (reason, promise) => {
  14.   console.log(reason, promise)
  15.   // reason => Promise 失败原因，一般是一个错误对象
  16.   // promise => 出现异常的 Promise 对象
  17. })

静态方法

Promise.resolve(‘foo’)

如果传入的是一个普通值，就相当于一个promise成功resolve(‘foo’)
如果传入的是一个 Promise 对象，Promise.resolve 方法原样返回
如果传入的是带有一个跟 Promise 一样的 then 方法的对象，Promise.resolve 会将这个对象作为 Promise 执行 

  1. function ajax(url) {
  2.   return new Promise(function (resolve, reject) {
  3.     var xhr = new XMLHttpRequest()
  4.     xhr.open('GET', url)
  5.     xhr.responseType = 'json'
  6.     xhr.onload = function () {
  7.       if (this.status === 200) {
  8.         resolve(this.response)
  9.       } else {
  10.         reject(new Error(this.statusText))
  11.       }
  12.     }
  13.     xhr.send()
  14.   })
  15. }
  17. // 如果传入的是一个普通值，就相当于下面写法
  18. Promise.resolve('foo')
  19.   .then(function (value) {
  20.     console.log(value)
  21.   })
  23. new Promise(function (resolve, reject) {
  24.   resolve('foo')
  25. })
  27. // 如果传入的是一个 Promise 对象，Promise.resolve 方法原样返回
  29. var promise = ajax('/api/users.json')
  30. var promise2 = Promise.resolve(promise)
  31. console.log(promise === promise2)//true
  33. // 如果传入的是带有一个跟 Promise 一样的 then 方法的对象，Promise.resolve 会将这个对象作为 Promise 执行
  35. Promise.resolve({
  36.   then: function (onFulfilled, onRejected) {
  37.     onFulfilled('foo')
  38.   }
  39. })
  40.   .then(function (value) {
  41.     console.log(value)//'foo'
  42.   })

Promise.reject(‘anything’)

传入任何值，都会作为这个 Promise 失败的理由

  1. // Promise.reject 传入任何值，都会作为这个 Promise 失败的理由
  3. Promise.reject(new Error('rejected'))
  4.   .catch(function (error) {
  5.     console.log(error)
  6.   })
  8. Promise.reject('anything')
  9.   .catch(function (error) {
  10.     console.log(error)
  11.   })

并行执行

Promise.all

任何一个出现异常就会进入失败回调

  1. // Promise 并行执行
  3. function ajax (url) {
  4.   return new Promise(function (resolve, reject) {
  5.     var xhr = new XMLHttpRequest()
  6.     xhr.open('GET', url)
  7.     xhr.responseType = 'json'
  8.     xhr.onload = function () {
  9.       if (this.status === 200) {
  10.         resolve(this.response)
  11.       } else {
  12.         reject(new Error(this.statusText))
  13.       }
  14.     }
  15.     xhr.send()
  16.   })
  17. }
  19. // ajax('/api/users.json')
  20. // ajax('/api/posts.json')
  22. var promise = Promise.all([
  23.   ajax('/api/users.json'),
  24.   ajax('/api/posts1.json')
  25. ])
  27. promise.then(function (values) {
  28.   console.log(values)
  29. }).catch(function (error) {
  30.   console.log(error)
  31. })
  33. // 批量发送请求
  34. ajax('/api/urls.json')
  35.   .then(value => {
  36.     const urls = Object.values(value)
  37.     const tasks = urls.map(url => ajax(url))
  38.     return Promise.all(tasks)
  39.   })
  40.   .then(values => {
  41.     console.log(values)
  42.   })

Promise.race

只要有一个返回结果就更改状态进入回调 

  1. // Promise.race 实现超时控制
  3. const request = ajax('/api/posts.json')
  4. const timeout = new Promise((resolve, reject) => {
  5.   setTimeout(() => reject(new Error('timeout')), 500)
  6. })
  8. Promise.race([
  9.   request,
  10.   timeout
  11. ])
  12. .then(value => {
  13.   console.log(value)
  14. })
  15. .catch(error => {
  16.   console.log(error)
  17. })

执行时序

Promise 的回调是微任务，本轮调用末尾直接执行

  1. // 微任务
  3. console.log('global start')
  5. // setTimeout 的回调是 宏任务，进入回调队列排队
  6. setTimeout(() => {
  7.   console.log('setTimeout')
  8. }, 0)
  10. // Promise 的回调是 微任务，本轮调用末尾直接执行
  11. Promise.resolve()
  12.   .then(() => {
  13.     console.log('promise')
  14.   })
  15.   .then(() => {
  16.     console.log('promise 2')
  17.   })
  18.   .then(() => {
  19.     console.log('promise 3')
  20.   })
  22. console.log('global end')
  23. /* 
  24. global start
  25. global end
  26. promise
  27. promise 2
  28. promise 3
  29. setTimeout
  30. */