promise是什么？

1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

如何使用promise?

首先把异步函数想象成一个打电话的过程，这里我们用 setTimeout 模拟异步执行过程

  1. function call(boolean) {
  2.   console.log('calling...')
  3.   setTimeout(() => {
  4.     if (boolean) { connected() }
  5.       else { disConnected() }
  6.   }, 3000)
  7. }
  8. function connected() { console.log('pick up the phone') }// 接通
  9. function disConnected() { console.log('reject the call') }// 挂断
  10. call(true)

这样写我们会发现函数的耦合性太高, 函数名固定死了,所以让我们改进一下

在函数声明传入的值里 多出来两个回调函数，而调用函数的同时传入成功后的回调 和 失败后的回调函数 进行解耦

  1. function call(boolean,connectedCallback,disConnectedCallback) {
  2.   console.log('calling...')
  3.   setTimeout(() => {
  4.     if (boolean) { connectedCallback() }
  5.     else{ disConnectedCallback() }
  6.   }, 3000)
  7. }
  8. call(false, () => {
  9.   console.log('pick up the phone')
  10. }, () => {
  11.   console.log('reject the call')
  12. })

此时我们又发现了个问题，这样写后面两个参数不知道传入值是否为函数，那我们继续改进

巧用&&运算符，如果前面为真，则执行后面，如果为假，则不执行后面操作

  1. function call(boolean,connectedCallback,disConnectedCallback) {
  2.   console.log('calling...')
  3.   setTimeout(() => {
  4.     if (boolean) { (typeof connectedCallback === 'function') && connectedCallback() }
  5.     else{ (typeof disConnectedCallback === 'function') && disConnectedCallback() }
  6.   }, 3000)
  7. }
  8. call(false, () => {
  9.   console.log('pick up the phone')
  10. }, () => {
  11.   console.log('reject the call')
  12. })

但是这样函数可读性有点差，那让我们来看看Promise写法！

引入Promise**写法**

  1. function call(boolean) {
  2.   return new Promise((resolve, reject) => {// new一个promise对象 对象要包裹setTimeout，不然报错找不到.then()
  3.     console.log('calling...')
  4.     setTimeout(() => {
  5.       if (boolean) { resolve() }
  6.       else{ reject() }
  7.     }, 3000)
  8.   })
  9. }
  10. call(false)
  11.   .then(() => {
  12.       console.log('pick up the phone')
  13. }).catch(() => {
  14.       console.log('reject the call')
  15. })

或者运用Async~await**写法**

  1. function call(boolean) {
  2.   return new Promise((resolve, reject) => {
  3.     console.log('calling...')
  4.     setTimeout(() => {
  5.       if (boolean) { resolve() }
  6.       else{ reject() }
  7.     }, 3000)
  8.   })
  9. }
  11. (async () => {
  12.   try {
  13.     await call(true)
  14.     console.log('pick up the phone')
  15.   } catch(e) {
  16.       console.log('reject the call')
  17.   }
  18. })()