• Promise详解

    文章目录

    1.什么是Promise呢？

    Promise是异步编程的一种解决方案
    那什么时候我们会来处理异步事件呢？

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

    1. 1 网络请求的回调地狱

    我们来考虑下面的场景(有夸张的成分)：

    • 我们需要通过一个url1从服务器加载一个数据data1，data1中包含了下一个请求的url2
    • 我们需要通过data1取出url2，从服务器加载数据data2，data2中包含了下一个请求的url3
    • 我们需要通过data2取出url3，从服务器加载数据data3，data3中包含了下一个请求的url4
    • 发送网络请求url4，获取最终的数据data4
      在这里插入图片描述
      上面的代码看着没有什么问题 , 但是这样的代码既不优雅又难以为维护, 因此我们可以用Promise来优雅的解决这样的问题 .

    2. Promise的基本使用

    2. 1.定时器的异步事件

    • 我们先来看看Promise最基本的语法。
    • 这里，我们用一个定时器来模拟异步事件：
    • 假设下面的data是从网络上1秒后请求的数据
    • console.log就是我们的处理方式。

    在这里插入图片描述

    • 这是我们过去的处理方式，我们将它换成Promise代码
      在这里插入图片描述

      • 这个例子会让我们感觉脱裤放屁，多此一举

    • 首先，下面的Promise代码明显比上面的代码看起来还要复杂。

    • 其次，下面的Promise代码中包含的resolve、reject、then、catch都是些什么东西？

    我们先不管第一个复杂度的问题，因为这样的一个屁大点的程序根本看不出来Promise真正的作用。

    2. 2.定时器异步事件解析

    我们先来认认真真的读一读这个程序到底做了什么？

    • new Promise很明显是创建一个Promise对象
    • 小括号中((resolve, reject) => {})也很明显就是一个函数，而且我们这里用的是之前刚刚学习过的箭头函数。、

    但是resolve, reject它们是什么呢？

    • 我们先知道一个事实：在创建Promise时，传入的这个箭头函数是固定的（一般我们都会这样写）

    • resolve和reject它们两个也是函数，通常情况下，我们会根据请求数据的成功和失败来决定调用哪一个。

    成功还是失败？

    • 如果是成功的，那么通常我们会调用resolve(messsage)，这个时候，我们后续的then会被回调。
    • 如果是失败的，那么通常我们会调用reject(error)，这个时候，我们后续的catch会被回调。

    OK，这就是Promise最基本的使用了。

     
    // 同步
    const name = 'yyy';
    console.log(name);
    const result = 3 + 5;
 
    // 异步
    // 1.使用setTimeout 用一个定时器来模拟异步事件
    // setTimeout(() => {
    //   console.log('Hello World');
    // }, 1000)
 
 
    // 什么情况下会用到Promise?
    // 一般情况下是有异步操作时,使用Promise对这个*异步操作进行封装*
    // new -> 构造函数(1.保存了一些状态信息  2.执行传入的函数)
    // 在执行传入的回调函数时, 会传入两个参数, resolve解决, reject拒绝.这两个本身又是函数
    // 参数 -> 函数((resolve, reject)
 
    // 以后有什么异步的操作的话都可以封装在Promise里面
 
 
    new Promise((resolve, reject) => {
 
      setTimeout(() => {
 
        // 如果有代码需要处理不会直接这样放这里 在then里面处理data
        // console.log('hello world');
        // console.log('hello world');
        // console.log('hello world');
        // console.log('hello world');
 
        // 成功的话去到then那里
        // resolve('Hello World')
 
        // 失败的时候调用reject 会去到catch那里
        reject('error message')
      }, 1000)
    }).then((data) => { // then里面也是一个函数
      // 1.100行的处理代码
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
    }).catch((err) => {
      console.log(err);
    })
    // 通过回调里的 resolve(data) 将这个 promise 标记为 resolverd，
    // 然后进行下一步 then((data)=>{//do something})，resolve 里的参数就是你要传入 then 的数据。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

    2. 3 Promise三种状态和另外处理形式

    异步操作的三种状态 :

    - pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
    - fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
    - reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()
    在这里插入图片描述

    - Promise的另外处理形式

    new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve('Hello Vuejs')
      reject('error message')
    }, 1000)
    // 不想同时写then和catch的话 then里面可以直接传入两个函数 data,err
  }).then(data => {
    console.log(data);
  }, err => {
    console.log(err);
  })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    3 . Promise的链式调用

    3. 1 Promise链式调用

    • 我们在看Promise的流程图时，发现无论是then还是catch都可以返回一个Promise对象。
    • 所以，我们的代码其实是可以进行链式调用的：
     
    // 参数 -> 函数(resolve, reject)
    // resolve, reject本身它们又是函数
    // 链式编程
    new Promise((resolve, reject) => {
 
      // 第一次网络请求的代码
      setTimeout(() => {
        resolve()
      }, 1000)
 
    }).then(() => {
      // 第一次拿到结果的处理代码
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');
 
      // 如果还有回调的话可以在这里写 在第一个.then()的后面继续.then()
      return new Promise((resolve, reject) => {
 
        // 第二次网络请求的代码
        setTimeout(() => {
          resolve()
        }, 1000)
      })
    }).then(() => {
 
      // 第二次处理的代码
      console.log('Hello Vuejs');
      console.log('Hello Vuejs');
      console.log('Hello Vuejs');
      console.log('Hello Vuejs');
      console.log('Hello Vuejs');
      console.log('Hello Vuejs');
 
      return new Promise((resolve, reject) => {
 
        // 第三次网络请求的代码
        setTimeout(() => {
          resolve()
        })
      })
    }).then(() => {
 
      // 第三处理的代码
      console.log('Hello Python');
      console.log('Hello Python');
      console.log('Hello Python');
      console.log('Hello Python');
      console.log('Hello Python');
    })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    3. 2 Promise链式调用简写

    任务要求比如 :

    • 网络请求: aaa -> 自己处理(10行)
    • 处理拼接后: aaa111 -> 自己处理(10行)
    • 处理拼接后: aaa111222 -> 自己处理
     new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('aaa')
          }, 1000)
        }).then(res => {
          // 1.自己处理10行代码
          console.log(res, '第一层的10行处理代码');
        
          // 2.对结果进行第一次处理
          return new Promise((resolve, reject) => {
            // resolve(res + '111')
            reject('err')
          })
        }).then(res => {
          console.log(res, '第二层的10行处理代码');
        
          return new Promise(resolve => {
            resolve(res + '222')
          })
        }).then(res => {
          console.log(res, '第三层的10行处理代码');
        }).catch(err => {
          console.log(err);
        })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    第一次抽离new Promise(resolve => resolve(结果))简写

     new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000)
        }).then(res => {
            // 1.自己处理10行代码
            console.log(res, '第一层的10行处理代码');

            // 2.对结果进行第一次处理
            return Promise.resolve(res + '111')
        }).then(res => {
            console.log(res, '第二层的10行处理代码');

            return Promise.resolve(res + '222')
        }).then(res => {
            console.log(res, '第三层的10行处理代码');
        })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述
    第二次进行抽离: 省略掉Promise.resolve

      /* -----省略掉Promise.resolve，直接return res ----- */
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000)
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res, '第一层的10行处理代码');
 
      // 2.对结果进行第一次处理
      return res + '111'
    }).then(res => {
      console.log(res, '第二层的10行处理代码');
 
      return res + '222'
    }).then(res => {
      console.log(res, '第三层的10行处理代码');
    })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这里插入图片描述

    3. 3 throw手动抛出异常

    上面的都是每一层成功，那失败的怎么写呢？

     new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000)
        }).then(res => {
            // 1.自己处理10行代码
            console.log(res, '第一层的10行处理代码');

            // 2.对结果进行第一次处理
            // return Promise.reject('error message')
            // throw 手动抛出异常
            throw 'error message'   //打印error message
        }).then(res => {
            console.log(res, '第二层的10行处理代码');

            return Promise.resolve(res + '222')
        }).then(res => {
            console.log(res, '第三层的10行处理代码');
        }).catch(err => {
            console.log(err);
        })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    3. 4 Promise的all方法使用

    • 需求本身依赖两个请求 不确定是哪个先请求回来，所以两个都得处理handleResult
    • 保证数据在两次网络请求都成功的情况下 才能拿到数据
     
    // 需求本身依赖两个请求 不确定是哪个先请求回来，所以两个都得处理handleResult
    // 请求一:
    // 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可以将多个Promise实例包装成一个新的Promise实例。统一进行回调
    // 同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
    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: 'yyy',
            age: 18
          })
        }, 2000)
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            name: 'kobe',
            age: 19
          })
        }, 1000)
      })
    ]).then(results => {
      console.log(results);
    })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69

    在这里插入图片描述

  • 相关阅读:
    【SQL刷题】Day10----SQL高级过滤函数专项练习
    .NET餐厅管理系统user数据帮助类查找用户姓名、判断用户电话号码是已否存在、获取用户信息、获取管理员权限、注册
    D. Divide and Equalize--Codeforces Round 903 (Div. 3)
    使用Nodejs和Express构建http响应流实现下载功能
    JavaScript中的设计模式
    scala 异步操作 生产者消费者
    NPOI导出千分位带.00格式显示
    TEMU平台要求电子产品提供的UL测试报告如何办理？
    java计算机毕业设计高校教师个人信息管理系统MyBatis+系统+LW文档+源码+调试部署
    基于微信小程序的校运会管理系统设计与实现-计算机毕业设计源码+LW文档
  • 原文地址：https://blog.csdn.net/weixin_46104934/article/details/126004385