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代码如下 : 

{
  "id" : 1,
  "name" : "Cyan"
}

                student_detail_1.json代码如下 : 

{
  "id" : 1,
  "name" : "Cyan",
  "age" : 21,
  "score" : 450
}

            1.2 JQuery操作Ajax

                traditional_ajax.html代码如下 : 

                运行结果 : 

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

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

                运行结果 ：

---

三、Promise代码重排优化

        1.问题分析 : 

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

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

        2.代码优化 : 

            2.1 数据准备

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

{
  "id" : 1,
  "phonetic" : "/kʌˈstoʊdiən/",
  "father": "f1",
  "mother": "m1",
  "telephone": 5204505
}

            2.2 代码重排

                promise_EX.html代码如下 : 

                运行结果 : 

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