一、认识Promise

1.1 什么是Promise呢？

  • ES6中一个非常重要和好用的特性就是Promise
    • 但是初次接触Promise会一脸懵逼，这TM是什么东西？
    • 看看官方或者一些文章对它的介绍和用法，也是一头雾水。
  • Promise到底是做什么的呢？
    • Promise是异步编程的一种解决方案。
  • 那什么时候我们会来处理异步事件呢？
    • 一种很常见的场景应该就是网络请求了。
    • 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。
    • 所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。
    • 如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。
  • 但是，当网络请求非常复杂时，就会出现回调地狱。
    • OK，我以一个非常夸张的案例来说明。

1.2 网络请求的回调地狱

  • 我们来考虑下面的场景(有夸张的成分)：
    • 我们需要通过一个url1从服务器加载一个数据data1，data1中包含了下一个请求的url2
    • 我们需要通过data1取出url2，从服务器加载数据data2，data2中包含了下一个请求的url3
    • 我们需要通过data2取出url3，从服务器加载数据data3，data3中包含了下一个请求的url4
    • 发送网络请求url4，获取最终的数据data4

image.png

  • 上面的代码有什么问题吗？
    • 正常情况下，不会有什么问题，可以正常运行并且获取我们想要的结果。
    • 但是，这样额代码难看而且不容易维护。
    • 我们更加期望的是一种更加优雅的方式来进行这种异步操作。
  • 如何做呢？就是使用Promise。
    • Promise可以以一种非常优雅的方式来解决这个问题。

二、Promise基本使用

2.1 定时器的异步事件

  • 我们先来看看Promise最基本的语法。
  • 这里，我们用一个定时器来模拟异步事件：
    • 假设下面的data是从网络上1秒后请求的数据
    • console.log就是我们的处理方式。
  • 这是我们过去的处理方式，我们将它换成Promise代码
  • 这个例子会让我们感觉脱裤放屁，多此一举
    • 首先，下面的Promise代码明显比上面的代码看起来还要复杂。
    • 其次，下面的Promise代码中包含的resolve、reject、then、catch都是些什么东西？
  • 我们先不管第一个复杂度的问题，因为这样的一个屁大点的程序根本看不出来Promise真正的作用。

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  9. <script>
  10.   // 1.使用setTimeout
  11.   // setTimeout(() => {
  12.   //   console.log('Hello World');
  13.   // }, 1000)
  15.   // 什么情况下会用到Promise?
  16.   // 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
  17.   // new -> 构造函数(1.保存了一些状态信息  2.执行传入的函数)
  18.   // 在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
  19.   new Promise((resolve, reject) => {
  20.     setTimeout(() => {
  21.       // 成功的时候调用resolve
  22.       // resolve('Hello World')
  24.       // 失败的时候调用reject
  25.       reject('error message')
  26.     }, 1000)
  27.   }).then((data) => {
  28.     // 1.100行的处理代码
  29.     console.log(data);
  30.     console.log(data);
  31.     console.log(data);
  32.     console.log(data);
  33.     console.log(data);
  34.   }).catch((err) => {
  35.     console.log(err);
  36.   })
  37. </script>
  38. </body>
  39. </html>

2.2 定时器异步事件解析

  • 我们先来认认真真的读一读这个程序到底做了什么？
    • new Promise很明显是创建一个Promise对象
    • 小括号中((resolve, reject) => {})也很明显就是一个函数，而且我们这里用的是之前刚刚学习过的箭头函数。
      • 但是resolve, reject它们是什么呢？
      • 我们先知道一个事实：在创建Promise时，传入的这个箭头函数是固定的（一般我们都会这样写）
      • resolve和reject它们两个也是函数，通常情况下，我们会根据请求数据的成功和失败来决定调用哪一个。
    • 成功还是失败？
      • 如果是成功的，那么通常我们会调用resolve(messsage)，这个时候，我们后续的then会被回调。
      • 如果是失败的，那么通常我们会调用reject(error)，这个时候，我们后续的catch会被回调。
  • OK，这就是Promise最基本的使用了。

2.3 Promise三种状态

  • 首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise
    • 异步操作之后会有三种状态
  • 我们一起来看一下这三种状态:
    • pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
    • fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
    • reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

image.png
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  9. <script>
  10.   new Promise((resolve, reject) => {
  11.     setTimeout(() => {
  12.       // resolve('Hello Vuejs')
  13.       reject('error message')
  14.     }, 1000)
  15.   }).then(data => {
  16.     console.log(data);
  17.   }, err => {
  18.     console.log(err);
  19.   })
  20. </script>
  21. </body>
  22. </html>

三、Promise链式调用

3.1 Promise链式调用

  • 我们在看Promise的流程图时，发现无论是then还是catch都可以返回一个Promise对象。
  • 所以，我们的代码其实是可以进行链式调用的：
  • 这里我们直接通过Promise包装了一下新的数据，将Promise对象返回了
    • Promise.resovle()：将数据包装成Promise对象，并且在内部回调resolve()函数
    • Promise.reject()：将数据包装成Promise对象，并且在内部回调reject()函数

image.png

3.2 链式调用简写

  • 简化版代码：
    • 如果我们希望数据直接包装成Promise.resolve，那么在then中可以直接返回数据
    • 注意下面的代码中，我讲return Promise.resovle(data)改成了return data
    • 结果依然是一样的

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  9. <script>
  10.   // 请求一:
  11.   let isResult1 = false
  12.   let isResult2 = false
  13.   $ajax({
  14.     url: '',
  15.     success: function () {
  16.       console.log('结果1');
  17.       isResult1 = true
  18.       handleResult()
  19.     }
  20.   })
  21.   // 请求二:
  22.   $ajax({
  23.     url: '',
  24.     success: function () {
  25.       console.log('结果2');
  26.       isResult2 = true
  27.       handleResult()
  28.     }
  29.   })
  31.   function handleResult() {
  32.     if (isResult1 && isResult2) {
  33.       //
  34.     }
  35.   }
  37.   // wrapped into
  38.   // 网络请求: aaa -> 自己处理(10行)
  39.   // 处理: aaa111 -> 自己处理(10行)
  40.   // 处理: aaa111222 -> 自己处理
  41.   // new Promise((resolve, reject) => {
  42.   //   setTimeout(() => {
  43.   //     resolve('aaa')
  44.   //   }, 1000)
  45.   // }).then(res => {
  46.   //   // 1.自己处理10行代码
  47.   //   console.log(res, '第一层的10行处理代码');
  48.   //
  49.   //   // 2.对结果进行第一次处理
  50.   //   return new Promise((resolve, reject) => {
  51.   //     // resolve(res + '111')
  52.   //     reject('err')
  53.   //   })
  54.   // }).then(res => {
  55.   //   console.log(res, '第二层的10行处理代码');
  56.   //
  57.   //   return new Promise(resolve => {
  58.   //     resolve(res + '222')
  59.   //   })
  60.   // }).then(res => {
  61.   //   console.log(res, '第三层的10行处理代码');
  62.   // }).catch(err => {
  63.   //   console.log(err);
  64.   // })
  66.   // new Promise(resolve => resolve(结果))简写
  67.   new Promise((resolve, reject) => {
  68.     setTimeout(() => {
  69.       resolve('aaa')
  70.     }, 1000)
  71.   }).then(res => {
  72.     // 1.自己处理10行代码
  73.     console.log(res, '第一层的10行处理代码');
  75.     // 2.对结果进行第一次处理
  76.     return Promise.resolve(res + '111')
  77.   }).then(res => {
  78.     console.log(res, '第二层的10行处理代码');
  80.     return Promise.resolve(res + '222')
  81.   }).then(res => {
  82.     console.log(res, '第三层的10行处理代码');
  83.   })
  85.   // 省略掉Promise.resolve
  86.   new Promise((resolve, reject) => {
  87.     setTimeout(() => {
  88.       resolve('aaa')
  89.     }, 1000)
  90.   }).then(res => {
  91.     // 1.自己处理10行代码
  92.     console.log(res, '第一层的10行处理代码');
  94.     // 2.对结果进行第一次处理
  95.     return res + '111'
  96.   }).then(res => {
  97.     console.log(res, '第二层的10行处理代码');
  99.     return res + '222'
  100.   }).then(res => {
  101.     console.log(res, '第三层的10行处理代码');
  102.   })
  105.   new Promise((resolve, reject) => {
  106.     setTimeout(() => {
  107.       resolve('aaa')
  108.     }, 1000)
  109.   }).then(res => {
  110.     // 1.自己处理10行代码
  111.     console.log(res, '第一层的10行处理代码');
  113.     // 2.对结果进行第一次处理
  114.     // return Promise.reject('error message')
  115.     throw 'error message'
  116.   }).then(res => {
  117.     console.log(res, '第二层的10行处理代码');
  119.     return Promise.resolve(res + '222')
  120.   }).then(res => {
  121.     console.log(res, '第三层的10行处理代码');
  122.   }).catch(err => {
  123.     console.log(err);
  124.   })
  125. </script>
  126. </body>
  127. </html>

四、Promise的all方法使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  // 请求二一:
  // let isResult1 = false
  // let isResult2 = false
  // $ajax({
  //   url: '',
  //   success: function () {
  //     console.log('结果1');
  //     isResult1 = true
  //     handleResult()
  //   }
  // })
  // // 请求二:
  // $ajax({
  //   url: '',
  //   success: function () {
  //     console.log('结果2');
  //     isResult2 = true
  //     handleResult()
  //   }
  // })
  //
  // function handleResult() {
  //   if (isResult1 && isResult2) {
  //     //
  //   }
  // }


  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({name: 'why', age: 18})
      }, 2000)
    }),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({name: 'kobe', age: 19})
      }, 1000)
    })
  ]).then(results => {
    console.log(results);
  })
</script>
</body>
</html>