博客

1、什么是Promise


ES6中一个非常重要和好用的特性就是Promise，Promise是异步编程的一种解决方案（简单来说就是对异步的代码进行包装）

2、什么时候会来处理异步事件？


一种很常见的场景应该就是网络请求了。我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像3+4=7一样将结果返回，此时我们会传入另外一个函数，在数据请求成功时将数据通过传入的函数回调出去。如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦，但是当网络请求非常复杂时就会出现回调地狱（多层回调，回调函数里面进行多次回调）

3、什么情况下会用到Promise？


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

案例：定时器的异步事件




传统写法：

<script>
  setTimeout(() => {
    console.log("Hello World");

    setTimeout(() => {
      console.log("Hello Vue");
      
      setTimeout(() => {
        console.log("Hello Ali");
      })
    },1000)
  },1000)
</script>

Promise写法（用Promise来解决回调地狱）：

<script>
  //链式编程，Promise()中的参数本身就是函数，在执行传入的回调函数时，会传入两个参数resolve和reject，这两个参数本身也是函数
  new Promise((resolve,reject) => {
    //第一次网络请求的代码
    setTimeout(() => { 
      resolve();//网络请求成功的时候调用resolve，调用完resolve之后就会继续回调.then()
    },1000)
  }).then(() => {
    //第一次拿到结果的处理代码
    console.log("Hello World"); //输出Hello World
    
    return new Promise((resolve,reject) => {
      //第二次网络请求的代码
      setTimeout(() => {
        resolve();
      },1000)
    })
  }).then(() => {
    //第二次拿到结果的处理代码
    console.log("Hello Vue"); //输出Hello Vue

    return new Promise((resolve,reject) => { 
      //第三次网络请求的代码
      setTimeout(() => {
        resolve();
      })
    })
  }).then(() => {
    //第三次拿到结果的处理代码
    console.log("Hello Ali"); //输出Hello Ali
  })
</script>

4、reject的使用

<script>
  new Promise((resolve,reject) => {
    setTimeout(() => { 
      reject("error message");//网络请求失败的时候调用reject
    },1000)
  }).then((data) => {
    console.log(data); //不执行这段代码
  }).catch({err) => {
    console.log(err); //输出error message
  })
</script>