三十六、Promise

一、Promise 是异步编程的一种解决方案

二、什么时候会处理异步事件

• 一种很常见的场景应该就是网络请求了。
• 我们封装一个网络请求的函数,因为不能立即拿到结果,所以不能像简单的3+4=7一样将结果返回。
• 所以往往我们会传入另外一个函数,在数据请求成功时,将数据通过传入的函数回调出去。
• 如果只是一个简单的网络请求,那么这种方案不会给我们带来很大的麻烦。 

三、当网络请求非常复杂时，就会出现回调地狱

如下所示（不容易进行维护，且非常难看）：

• 我们需要通过一个url1从服务器加载一个数据datal, datal中包含了下一个请求的url2
• 我们需要通过datal取出url2,从服务器加载数据data2, data2中包含了下一个请求的url3
• 我们需要通过data2取出url3,从服务器加载数据data3, data3中包含了下一个请求的url4
• 发送网络请求url4，获取最终的数据data4

 四、一般情况当有异步操作时，使用Promise对这个异步进行封装（如下是Promise的基本使用）

      //一般情况下有异步操作时，使用Promise对这个一部操作进行封装
      // new -> 构造函数（1.保存了一些状态信息 2.执行传入的函数）
      //在执行传入的回调函数时，会传入两个参数，resolve ，reject  本身又是函数
      new Promise((resolve, reject)=>{
        //模拟网络请求
        setTimeout(()=>{
          //成功的时候调用 resolve
          resolve("Hello Worlds")

          //失败的时候调用reject
          reject('error message')
        },1000)
      }).then((data)=>{
        //100行的处理代码
        console.log(data);
      }).catch((err)=>{
        console.log(err);
      })

另外一种写法

      new Promise((resolve, reject)=>{
        setTimeout(()=>{
          resolve('hellow vuejs')
          //reject('error message')
        },1000)
      }).then(data=>{
        console.log(data);
      },err=>{
        console.log(err);
      })

五、Promise处理异步操作会有三种状态

pending：等待状态，比如正在进行网络请求,或者定时器没有到时间

fulling：满足状态，当我们主动回调了resolve时,就处于该状态,并且会回调.then()

reject：拒绝状态，当我们主动回调了reject时,就处于该状态,并且会回调.catch()

六、Promise的链式调用

    <script>
      //进行了一次网络请求：aaa -》自处理(10行)
      //处理：aaa111 -> 自己处理（10行）
      //处理：aaa111222 -》自己处理
      // new Promise((resolve, reject)=>{
      //   setTimeout(()=>{
      //     resolve('aaa')
      //   },1000)
      // }).then((res)=>{
      //   //1.自己处理10行代码
      //   console.log(res, '第一层的10行处理代码')

      //   //2.对结果进行第一次处理
      //   return new Promise((resolve)=>{
      //     resolve(res + '111')
      //   })
      // }).then((res)=>{
      //   console.log(res, '第二层的10行处理代码')

      //   return new Promise((resolve)=>{
      //     resolve(res + '222')
      //   })
      // }).then((res)=>{
      //   console.log(res, '第三层的10行处理代码')
      // })

      //new Promise(resolve => resolve(结果))简写
      // new Promise((resolve, reject)=>{
      //   setTimeout(()=>{
      //     resolve('aaa')
      //   },1000)
      // }).then((res)=>{
      //   //1.自己处理10行代码
      //   console.log(res, '第一层的10行处理代码')

      //   //2.对结果进行第一次处理
      //   return Promise.resolve(res + '111')
      // }).then((res)=>{
      //   console.log(res, '第二层的10行处理代码')

      //   return Promise.resolve(res + '222')
      // }).then((res)=>{
      //   console.log(res, '第三层的10行处理代码')
      // })

      //省略掉 Primise.resolve
      new Promise((resolve, reject)=>{
        setTimeout(()=>{
          resolve('aaa')
        },1000)
      }).then((res)=>{
        //1.自己处理10行代码
        console.log(res, '第一层的10行处理代码')

        //2.对结果进行第一次处理
        return res + '111'
      }).then((res)=>{
        console.log(res, '第二层的10行处理代码')

        return res + '222'
      }).then((res)=>{
        console.log(res, '第三层的10行处理代码')
      })
    </script>

七、Promise的all方法的使用

    <script>
      Promise.all([
        // new Promise((resolve, reject)=>{
        //   $ajax({
        //     url:'url1',
        //     success: function(data){
        //       resolve(data)
        //     }
        //   })
        // }),
        // new Promise((resolve, reject)=>{
        //   $ajax({
        //     url:'url2',
        //     success: function(data){
        //       resolve(data)
        //     }
        //   })
        // })

        new Promise((resolve, reject)=>{
          setTimeout(()=>{
            resolve('result1')
          },2000)
        }),
        new Promise((resolve, reject)=>{
          setTimeout(()=>{
            resolve('result2')
          },1000)
        })
      ]).then(results =>{
        console.log(results[0])
        console.log(results[1])
      })
    </script>