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




    
    Traditional Asynchronous
    
    
    




                运行结果 : 

ES6 Promise 详解_第1张图片

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

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




    
    Promise Demonstration
    
    




                运行结果 :

ES6 Promise 详解_第2张图片


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




    
    To Optimize Promise
    
    



                运行结果 : 

ES6 Promise 详解_第3张图片

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

你可能感兴趣的:(Technology,Stack,#,ES6,es6,前端,javascript,java,web,js)