Promise介绍

• Promise是ES6引入的一个语法
• Promise是异步编程的一种解决方案

什么时候处理异步事件？

• 网络请求
• 我们封装一个网络请求的函数，因为不能立刻拿到结果
• 所以我们会传入另外一个函数，在数据请求成功时，将数据通过传入的而函数回调出去
• 如果只是一个简单地网络请求，那么这种方案不会给我们带来很大的麻烦
• 但是当网络请求太复杂时，就会出现回调地狱

回调地狱

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

上面代码有什么问题吗?

• 正常情况下没啥问题，正常运行
• 但是不容易维护
• 我们期望一种更加优雅的方式来进行这种异步操作

如何做呢？

• Promise可以以一种非常优雅的方式来解决这个问题

Promise基本使用

回调地狱 - - ！

  //Promise参数是一个函数
  //resolve,reject本身又是函数
  new Promise((resolve,reject)=>{
    //异步操作
    setTimeout(()=>{
      console.log('hello world');
      setTimeout(()=>{
        console.log('hello promise');
        setTimeout(()=>{
          console.log('hello vue');
        },1000)
      },1000)
    },1000)
  })

解决方法： 链式编程

  //Promise参数是一个函数
  //resolve,reject本身又是函数
  new Promise((resolve,reject)=>{
    //异步操作,第一次网络请求
    setTimeout(()=>{
      //第一次请求结果
      console.log('hello world');
      //再次请求
      resolve()
    },1000)
  }).then(()=>{
    //第二次网络请求
    setTimeout(()=>{
      //第二次请求结果
      console.log('hello vue');
      return new Promise((resolve,reject)=>{
        //返回后再次请求
        resolve()
      })
    },1000)
  }).then(()=>{
    //第三次网络请求
    setTimeout(()=>{
      //第三次请求结果
      console.log('hello java');
    },1000)
  })

当执行new Promise() 是，会执行构造函数，保存一些状态信息，执行传入的函数
在执行传入的回调函数是，会传入两个参数，resolve，reject，本身又是函数

  new Promise((resolve,reject)=>{
    setTimeout(()=>{
      //get data
      resolve(data)
      //失败的时候调用reject
      reject('error message')
    },1000)
  }).then((data)=>{
    //data处理代码
  }).catch((err)=>{
    //error处理代码
  })

Promise三种状态

synchronization: 同步
asynchronization: 异步

• padding: 等待状态，比如正在网络请求，定时事件未到
• fulfill: 满足状态，请求到了，当我们主动回调了resolve时，就处于该状态，并且会回调then()
• reject: 拒绝状态，当我们主动回调reject时，就出于该状态，并且会回调cath()

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