Promise 的含义

异步编程的解决方案，比传统的回调函数和事件更合理和强大。
Promise 最早由社区提出、实现，ES6 将其写入了语言标准，统一了用法，原生提供了 Promise 对象。
Promise 简单说是一个容器，里面保存着未来才会结束的事件（通常是异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
Promise 提供统一的 API，各种异步操作都可以用同样的方法来处理。

Promise 的两个特点

  1. 对象的状态不受外界影响。Promise 对象代表异步操作，有三种状态，pending(进行中)、fulfilled(已成功)、reject(已失败)。只有异步操作的结果
    可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是 Promise 这个名字的由来，它的英语意思是“承诺”，表示其他手段无法改变。
  2. 一旦状态改变，就不会再变。pending->fulfilled 或者 pending->reject，状态的转变只有这两种可能。如果改变已经发生了，你再对 Promise 对象添加回调函数，
    也会立即得到这个结果。

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层函数嵌套的回调函数。

Promise 也有缺点。

  1. 无法取消 Promise，一旦新建它就会立即执行，无法中途取消。
  2. 如果不设置回调函数，Promise 内部抛出错误，不会反映到外部。
  3. pending 状态时，无法得知当前进展到哪一段（刚刚开始还是即将完成）。 
    1. 一般来说某些事件不断反复发生，使用Stream模式比Promise更好。

基本用法

  1. const promise = new Promise(function(resolve, reject) {
  2.   if (false) {
  3.     setTimeout(function() {
  4.       resolve(666)
  5.     }, 500)
  6.   } else {
  7.     setTimeout(function() {
  8.       reject(555)
  9.     }, 2000)
  10.   }
  11. })
  13. promise.then(
  14.   function(data) {
  15.     console.log(666)
  16.   },
  17.   function(error) {
  18.     console.log(error)
  19.   },
  20. )

使用 Promise 的一个例子，主要是觉得 setTimeout 的写法比较有新意。

  1. function timeout(ms) {
  2.   return new Promise((resolve, reject) => {
  3.     setTimeout(resolve, ms, 'done')
  4.   })
  5. }
  7. timeout(2000).then(data => {
  8.   console.log(data)
  9. })

记住 Promise 新建后就会执行

  1. const aPromise = new Promise((resolve, reject) => {
  2.   console.log('Promise是立即执行，不是调用才执行，知道不！')
  3.   resolve(666)
  5.   console.log('其实，你虽然 resolve 了，但是我还是会执行！')
  7.   return
  8.   console.log('这里就不会执行了，因为前面已经return了')
  9. })
  11. aPromise
  12.   .then(data => {
  13.     console.log('Promise执行结束了！', data)
  14.   })
  15.   .catch(e => {
  16.     console.log(e)
  17.   })
  19. console.log('我就是一个普通的输出！')

使用 Promise 来做异步加载图片

  1. const loadingImageAsync = url => {
  2.   return new Promise((resolve, reject) => {
  3.     const image = new Image()
  4.     image.onload = () => {
  5.       resolve(image)
  6.     }
  8.     image.onerror = error => {
  9.       reject(new Error('图片打不开，小主！' + url))
  10.     }
  12.     image.src = url
  13.   })
  14. }
  16. loadingImageAsync('http://frontend.llccing.cn/poweredby.png')
  17.   .then(data => {
  18.     console.log(data)
  19.   })
  20.   .catch(error => {
  21.     console.log(error)
  22.   })
  24. // 第二个例子，errr是一个不存在的图片，会触发reject，同时被catch捕获。
  25. loadingImageAsync('http://frontend.llccing.cn/errr.png')
  26.   .then(data => {
  27.     console.log(data)
  28.   })
  29.   .catch(error => {
  30.     console.log(error)
  31.   })

使用Promise对象实现Ajax操作

  1. const getJSON = (url) => {
  2.   const promise = new Promise((resolve, reject) => {
  4.     const handler = function () {
  5.       if (this.readyState !== 4) {
  6.         return;
  7.       }
  9.       if (this.status === 200) {
  10.         resolve(this.response)
  11.       } else {
  12.         reject(new Error(this.satusText))
  13.       }
  14.     }
  16.     const client = new XMLHttpRequest();
  17.     client.open('get', url);
  18.     client.onreadystatechange = handler;
  19.     client.responseType = 'json';
  20.     client.setRequestHeader('Accept', 'application/json');
  21.     client.send();
  22.   })
  24.   return promise
  25. }
  27. // 因为实际不存在这个url，所以代码会执行到catch
  28. getJSON('/api/name/zhangsan').then(resp => {
  29.   console.log(resp)
  30. }).catch(error => {
  31.   console.log(error)
  32. })

如下p1和p2都是Promise实例，p2的resolve方法将p1作为参数，即一个异步操作的结果返回另一个异步操作。

那么这是p1的状态就会传给p2，就是说，p1的状态决定了p2的状态。如果p1是pending，那么p2的回调函数就会等待p1的状态变化；如果p1的状态是resolved或者rejected，那么p2的回调函数就会立刻执行。

  1. const p1 = new Promise((resolve, reject) => {
  2.   setTimeout(() => {
  3.     reject(new Error('fail'))
  4.   }, 3000)
  5. })
  7. const p2 = new Promise((resolve, reject) => {
  8.   setTimeout(() => {
  9.     resolve(p1)
  10.   }, 1000);
  11. })
  14. p2.then(result => {
  15.   console.log(result)
  16. }).catch(error => {
  17.   console.log(error)
  18. })

再次注意，调用resolve或者reject并不会终结Promise的函数执行。

一般来说，resolve或者reject后，Promise的是使命就完成了，所以最好在resolve或者reject前面加上return，如下面的第二个例子。

  1. new Promise((resolve, reject) => {
  2.     resolve(1)
  3.     // 这里的2还是会输出的
  4.   console.log(2)  
  5. }).then(res => {
  6.   console.log(res)
  7. })
  10. // 这样直接return
  11. new Promise((resolve, reject) => {
  12.   return resolve(1)
  13.   console.log(2)  
  14. }).then(res => {
  15.   console.log(res)
  16. })

Promise.prototype.then()

Promise实例具有then方法，也就是说then方法是定义在原型对象Promise.prototype上的。then方法的第一个参数resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。

then方法返回的是新的Promise实例，所以可以采用链式写法，即then方法后面再调用一个then方法。

  2. getJSON('./data.json').then(function (json) {
  3.   console.log(json)
  4.   return json.data
  5. }).then(function (data) {
  6.   console.log(data)
  7. })

采用链式的then，可以指定一组按照顺序调用的回调函数。这时前一个回调函数有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数就会等待该Promise对象的状态发生变化，才会被调用。

  2. getJSON('./data.json')
  3.   .then(function(json) {
  4.     console.log(json.url)
  5.     return getJSON(json.url)
  6.   })
  7.   .then(
  8.     function funcA(data) {
  9.       console.log('resolved', data)
  10.     },
  11.     function funcB(err) {
  12.       console.log('rejected', err)
  13.     },
  14.   )

改为箭头函数，则更为简洁

  1. getJSON('./data.json')
  2.   .then(function(json) {
  3.     console.log(json.url)
  4.     return getJSON(json.url)
  5.   })
  6.   .then(
  7.     function funcA(data) {
  8.       console.log('resolved', data)
  9.     },
  10.     function funcB(err) {
  11.       console.log('rejected', err)
  12.     },
  13.   )

Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

  1. promise.then(data => console.log(data)).catch(err => console.log(55, err))
  3. promise
  4.   .then(data => console.log(data))
  5.   .then(null, error => {
  6.     console.log(66, error)
  7.   })
  9. promise
  10.   .then(data => console.log(data))
  11.   .then(undefined, error => {
  12.     console.log(77, error)
  13.   })

Promise抛出一个错误，就会被catch方法指定的回调函数捕获。下面的两种写法是等价的

  1. const promise = new Promise((resolve, reject) => {
  2.   try {
  3.     throw new Error('reject test')
  4.   } catch (e) {
  5.     reject(e)
  6.   }
  7. })
  9. promise.catch(error => console.log(1, error))
  11. const promise2 = new Promise((resolve, reject) => {
  12.   reject(new Error('reject test2'))
  13. })
  15. promise2.catch(error => console.log(2, error))

比较上面两种写法，可以发现reject方法的作用，等同于抛出错误。

如果Promise状态已经是resolved，再抛出错误时无效的。

  1. const promise = new Promise((resolve, reject) => {
  2.   resolve(666)
  3.   throw new Error('error test')
  4. })
  6. promise.then(data=>console.log(1, data)).catch(error=> console.log(2, error))

Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获。
一般来说建议在then方法中定义rejected状态的回调函数，总是使用catch方法。

跟传统的try/catch不同的是，Promise对象如果没有指定catch方法的回调函数进行错误处理，那么抛出的错误不会传递到外层代码，即没有任何反应。

  1. const someAsyncThing = function () {
  2.   return new Promise((resolve, reject) => {
  3.     // 此处会报错，因为x没有声明
  4.     resolve(x+2)
  5.   })
  6. }
  8. someAsyncThing().then(() => {
  9.   console.log('everything is fine! ')
  10. })
  12. setTimeout(() => {
  13.   console.log(666)
  14. }, 2000);

上述代码，setTimeout函数间隔2s后还是会执行，证明Promise会吃掉错误。

node中有一个unhandleRejection事件，专门监听未捕获的rejected事件，

  1. process.on('unhandledRejection', (error, p) => {
  2.   console.log('wow', error)
  3. })

如果catch处理中还是有报错，那么可以再进行catch处理

  1. const promise = new Promise((resolve, reject) => {
  2.   resolve(x + 2)
  3. })
  5. promise
  6.   .then(data => {
  7.     console.log(data)
  8.   })
  9.   .catch(error => {
  10.     console.log('捕获, ', error)
  11.     console.log('捕获, ', y + 2)
  12.   })
  13.   .catch(error => {
  14.     console.log('再捕获, ', error)
  15.   })

Promise.prototype.finally()

finally方法用于指定不管Promise对象最后状态如何，都会执行的操作。该方法是ES2018引入的。

finally方法不接受任何参数。所以不知道Promise的状态是fulfilled还是rejected。这表明finally里的操作应该是状态无关的，不依赖Promise的执行结果。

  1. const promise = new Promise((resolve, reject) => {
  2.   resolve(666)
  3. })
  5. // 注意，finally 在node环境中，提示没有该方法，可能与node版本有关系，但是Chrome浏览器下正常。
  6. promise
  7.   .then(data => console.log(data))
  8.   .finally(() => {
  9.     console.log('always do things')
  10.   })

finally本质是then的特例

Promise.all()

Promise.all()方法用于将多个Promise实例，包装成一个新的Promise实例。

  1. const p1 = new Promise((resolve, reject) => {
  2.   resolve(1)
  3. })
  5. const p2 = new Promise((resolve, reject) => {
  6.   setTimeout(() => {
  7.     resolve(2)
  8.   }, 2000)
  9. })
  11. const p3 = new Promise((resolve, reject) => {
  12.   resolve(3)
  13. })
  15. const p = Promise.all([p1, p2, p3]).then(data => {
  16.   console.log(data)
  17. })

p的状态有p1、p2、p3决定：

  1. p123都是fulfilled，p是fulfilled。此时p123的返回值组成数组，传递给p的回调函数。
  2. p123有一个是rejected状态，p就是rejected。支持第一个被rejected的实例返回值，会传递给p的回调函数。

注意，要是作为Promise.all的参数的Promise自己定义了catch函数，那么Promise.all的catch不会再次捕获，而会执行 Promise.all.then方法

  1. const p1 = new Promise((resolve, reject) => {
  2.   resolve(1)
  3. })
  5. const p2 = new Promise((resolve, reject) => {
  6.   reject(new Error('test error'))
  7. }).catch(error => error)
  9. const p = Promise.all([p1, p2])
  10.   .then(data => console.log(data))
  11.   .catch(error => {
  12.     console.log(2, error)
  13.   })

如果p2不定义catch，那么则会执行 Promise.all的catch方法。

Promise.race()