Promise介绍和基本使用

<script>
  //1.使用setTimeout
  setTimeout(() => {
    console.log('hello Promise');
    setTimeout(() => {
      console.log('hello Js');
      setTimeout(() => {
        console.log('hello Vue');
      }, 1000)
    }, 1000)
  }, 1000)
  /**
   *  2.使用Promise对异步操作进行封装
   *   参数也是一个函数，该函数也有两个参数，resolve,reject
   *   resolve/reject本身又是函数，then也是函数
   *   一但调用resolve函数时，就会来到then函数
   *   链式编程，将网络请求和处理代码分开
   */

  new Promise((resolve, reject) => {
    //第一次网络请求代码
    setTimeout(() => {
      resolve()
    }, 1000)
  }).then(() => {
    //第一次拿到处理结果的代码
    console.log('hello Promise');
    return new Promise((resolve, reject) => {
      //第二次网络请求代码
      setTimeout(()=>{
        resolve()
      },1000)
    })
  }).then(()=>{
    //第二次处理结果代码
    console.log('hello Js');
    return new Promise((resolve, reject)=>{
      //第三次网络请求
      setTimeout(()=>{
        resolve()
      },1000)
    })
  }).then(()=>{
    //第三次处理代码
    console.log('hello Vue');
  })
</script>

上下代码效果一样，看起来下边更加复杂，其实结构更加清晰，形成链条，每个Promise里单独放网络请求代码，而then后边放请求到的结果处理代码，不用混为一谈。

什么时用到Promise

一般情况下有异步操作，使用Promise对这个异步操作进行封装

new Promise((resolve, reject)=>{
  setTimeout(()=>{
    //成功的时候调用
    resolve('hello promise');
    //失败时调用
    reject('error message');

  },1000)
}).then((data)=>{
  console.log(data);
}).catch((err)=>{
  console.log(err);
})

当我们new完——->会执行Promise构造函数(1.保留了一些状态信息,2执行传入函数)———>执行传入的回调函数时，会传入两个参数resolve/reject，其本身就是函数———->异步请求成功时，我们可以将请求到的数据传入resolve函数，这样在then函数中就可以获得data———–>如果异步请求失败，我们可以将错误信息传给reject函数，在catch函数中获取错误信息，并进行对应操作。

一个参数箭头函数中可以省略，上边没有省略