三十六、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的链式调用

Vue2x

相关

标签