• ES6 Promise 详解

    目录

    一、Promise基本介绍

    二、Promise实现多次请求

            1.传统Ajax方式实现多次请求 : 

                1.1 json数据准备

                1.2 JQuery操作Ajax

            2.使用ES6新特性Promise方式 : 

    三、Promise代码重排优化

            1.问题分析 : 

            2.代码优化 : 

                2.1 数据准备

                2.2 代码重排

    一、Promise基本介绍

            (1) Ajax方式的异步调用在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够直观，称为"Callback Hell" (回调地狱)。
            (2) Promise即是异步编程的一种解决方案，早在 ECMAScript 2015 (ES6) 中便成为标准。
            (3) 从语法层面讲，Promise是一个对象，用来获取异步操作的信息。

    二、Promise实现多次请求

            1.传统Ajax方式实现多次请求 : 

                1.1 json数据准备

                    通过student和student_detail_1两个json文件来简单模拟测试数据；第一次请求得到student.json中保存的数据，第二次请求通过前一次请求得到的数据，进一步得到student_detail_1.json中保存的数据（即先得到student.json中的id属性，根据该属性进一步得到student_detail_1.json中的更多属性）。 
                    student.json代码如下 : 

    1. {
    2.   "id" : 1,
    3.   "name" : "Cyan"
    4. }

                    student_detail_1.json代码如下 : 

    1. {
    2.   "id" : 1,
    3.   "name" : "Cyan",
    4.   "age" : 21,
    5.   "score" : 450
    6. }

                1.2 JQuery操作Ajax

                    traditional_ajax.html代码如下 : 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Traditional Asynchronoustitle>
    6.     
    7.     <script type="text/javascript" src="../script/jquery-3.7.0.min.js">script>
    8.     <script type="text/javascript">
    9.         /*
    10.         PS : JQuery操作Ajax回顾 :
    11.          $.ajax函数的常用参数如下———
    12.             (1) url : 请求的地址
    13.             (2) type : 请求的方式GET or POST
    14.             (3) data : 发送到服务器端的数据，将自动转换为请求字符串格式
    15.             (4) success : 成功的回调函数
    16.             (5) dataType : 返回的数据类型，常用Json或text。
    17.          */
    18.         $.ajax({
    19.             url:"../data/student.json",
    20.             // type: ,
    21.             // data: ,
    22.             success:function (resultData) {
    23.                 console.log("The 1st request,and the student's basic information is :",resultData);
    24.                 //从第二次异步请求开始，已经出现了"ajax嵌套"
    25.                 $.ajax({
    26.                     url:`../data/student_detail_${resultData.id}.json`,
    27.                     success(resultData) {
    28.                         console.log("The 2nd request,and the student's detailed information is :",resultData)
    29.                     },
    30.                     error(errInfo) {
    31.                         console.log("Oh oh,Something bad happened:",errInfo);
    32.                     }
    33.                 })
    34.             },
    35.             error(errInfo) {   //ES6新特性————对象的方法简写。
    36.                 console.log("Something bad happened:",errInfo);
    37.             }
    38.         })
    39.     script>
    40. head>
    41. <body>
    42.  
    43. body>
    44. html>

                    运行结果 : 

            2.使用ES6新特性Promise方式 : 

                    数据部分仍然使用data包下的student.json和student_detail_1.json。
                    promise.html代码如下 : 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Promise Demonstrationtitle>
    6.     <script type="text/javascript" src="../script/jquery-3.7.0.min.js">script>
    7.     <script type="text/javascript">
    8.         //1.首先请求data包下的student.json(需要创建一个Promise对象)
    9.             //创建Promise对象时需要传入一个箭头函数
    10.             //形参resolve表示请求成功的回调函数；形参reject表示请求失败的回调函数。
    11.             //形参resolve和reject是约定俗成的，不固定，可以自由更改名称。
    12.         let promise = new Promise((resolve,reject) => {
    13.             //发出Ajax异步请求
    14.             $.ajax({
    15.                 url:"../data/student.json",
    16.                 // type:
    17.                 // data:
    18.                 // dataType:
    19.                 success(resultData) {
    20.                     console.log("Promise's 1st request,and the student's basic information is :",resultData);
    21.  
    22.                     //该方法将resultData参数传递到then()
    23.                     resolve(resultData);
    24.                 },
    25.                 error(errInfo) {
    26.                     // console.log("Promise's 1st request---Perhaps sth bad happened:",errInfo);
    27.  
    28.                     //使用ES6---Promise提供的catch机制来统一处理异常
    29.                     reject(errInfo);
    30.                 }
    31.             })
    32.         })
    33.  
    34.         //2.第二次请求在这里执行！
    35.         promise.then(resultData => {    //箭头函数形参的简写
    36.             // 调用链, 通过return将Promise对象返回给下一个调用者。
    37.             return new Promise((resolve, reject) => {
    38.                 $.ajax({
    39.                     //url采用了模板字符串的形式
    40.                     url:`../data/student_detail_${resultData.id}.json`,
    41.                     success(resultData) {
    42.                         console.log("Promise's 2nd request,and the student's detailed information is :",resultData);
    43.  
    44.                         /*
    45.                             可以在第二次请求的success回调函数里，
    46.                             继续使用resolve(resultData);发出第三次请求。
    47.                          */
    48.                         resolve(resultData);
    49.                     },
    50.                     error(errInfo) {
    51.                         // console.log("Promise's 2nd request---Perhaps sth bad happened:",errInfo);
    52.                         reject(errInfo);
    53.                     }
    54.                 })
    55.             })
    56.         }).then(resultData => {
    57.             /*
    58.                 (1)此处输出的resultData,来自第二次Ajax请求的success中的"resolve(resultData);"
    59.                 (2)可以在这个then方法中，继续通过
    60.                     "return new Promise((resolve, reject) => { $.ajax({}) })"
    61.                     的方式来发出第三次Ajax异步请求。
    62.                 (3)第三次Ajax异步请求，是基于第二次Ajax请求获取的数据resultData。
    63.              */
    64.             console.log("After 2nd request, THE resultData =",resultData);
    65.         }).catch(errInfo => {
    66.             console.log("U~  Promise's request---Perhaps sth bad happened:",errInfo);
    67.         })
    68.     script>
    69. head>
    70. <body>
    71.  
    72. body>
    73. html>

                    运行结果 ：

    三、Promise代码重排优化

            1.问题分析 : 

            使用Primise方式代替传统Ajax方式发送多次异步请求之后，以“链式调用”代替了“嵌套调用”，可读性提升。

            但仍然存在“代码臃肿”，“代码重复度高”的特点；因此，可以通过代码重排进行优化。

            2.代码优化 : 

                2.1 数据准备

                    在data包下新建一个json文件，用来模拟student1的监护人的数据。
                    custodian_1.json代码如下 : 

    1. {
    2.   "id" : 1,
    3.   "phonetic" : "/kʌˈstoʊdiən/",
    4.   "father": "f1",
    5.   "mother": "m1",
    6.   "telephone": 5204505
    7. }

                2.2 代码重排

                    promise_EX.html代码如下 : 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>To Optimize Promisetitle>
    6.     <script type="text/javascript" src="../script/jquery-3.7.0.min.js">script>
    7.     <script type="text/javascript">
    8.         /**
    9.          * @function 将多次请求相似的代码封装到一个方法中
    10.          * @param url : 请求的资源
    11.          * @param data : 请求时携带的数据
    12.          * @returns {Promise}
    13.          */
    14.         function getRequest(url, data) {
    15.             return new Promise((resolve, reject) => {
    16.                 $.ajax({
    17.                     url:url,
    18.                     data:data,
    19.                     success(resultData) {
    20.                         resolve(resultData);
    21.                     },
    22.                     error(err) {
    23.                         reject(err);
    24.                     }
    25.                 })
    26.             })
    27.         }
    28.  
    29.         //1.第一次请求 --- 得到student.json中保存的数据
    30.         getRequest("../data/student.json").then(resultData => {
    31.             console.log("student =", resultData);
    32.  
    33.             //2.第二次请求 --- 得到student_detail_1.json中保存的数据
    34.             return getRequest(`../data/student_detail_${resultData.id}.json`).then(resultData => {
    35.                 console.log("student_1 =", resultData);
    36.  
    37.                 //3.第三次请求 --- 得到custodian_1.json中保存的数据
    38.                 return getRequest(`../data/custodian_${resultData.id}.json`).then(resultData => {
    39.                     console.log("custodian_1 =",resultData);
    40.                 })
    41.             })
    42.         }).catch(err => {
    43.             console.log("Perhaps something bad happened:",err);
    44.         })
    45.     script>
    46. head>
    47. <body>
    48. body>
    49. html>

                    运行结果 : 

            System.out.println("END------------------------------------------------------------");

  • 相关阅读:
    C语言 IO函数练习
    笔记 | 编程经验谈：如何正确的使用内存
    文件结构介绍
    el-select的el-option添加操作按钮插槽后实现勾选与按钮操作分离
    C++学习（四八七）android studio println的输出位置
    FANUC机器人实现本地自动运行的相关配置和参数设置
    大语言模型在天猫AI导购助理项目的实践！
    企业级npm仓库搭建
    golang channel执行原理与代码分析
    win10 & win11 停止系统自动更新方法
  • 原文地址：https://blog.csdn.net/TYRA9/article/details/133912776