Es6 Promise

在这一章的学习中   重点需要知道：
1 同步和异步
2回调地狱
3promise对象

1 同步异步
(1)同步任务：指没有被引擎挂起，在主线程上排队等待执行的任务。只有前一个任务执行完毕，才能执行下一个任务。
(2)异步任务：指被引擎放在一边，不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了，该任务才会进入主线程执行。排在异步任务后面的代码不用等待异步任务结束，会马上执行。

例：

var start=new Date();
setTimeout(function cb(){
    console.log("时间间隔：",new Date()-start+'ms');
},500);
while(new Date()-start<1000){}

2 回调地狱
含义：多个回调函数嵌套的写法叫做回调地狱
例： 请求到a的数据了之后再去请求b的数据，请求到b的数据之后，再去请求c的数据
回调地狱的写法是合法的，只不过是写法比较繁琐
ajax的回调地狱:
例：

 $.ajax({						
        url:"a.json",				请求到a的数据
        dataType:"json",
        success(data){              成功的回调函数  
            $.ajax({				请求到b的数据
                url:"b.json",
                dataType:"json",
                success(data){       成功的回调函数   
                    $.ajax({				请求到c的数据
                        url:"c.json",
                        dataType:"json",
                        success(data){
                           console.log(data) 
                        }
                    })
                }
            })
        }
    })

3 promise对象
1）含义：是一个对象
2）作用：Promise对象主要把回调函数嵌套的写法变成链式写法
1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列
3）用法： Promise对象里放的是异步操作的代码，异步操作的代码的状态会从等待状态变为成功状态或者是失败状态，当他的状态发生改变的时候就会触发.then方法，。then方法里有两个函数，第一个是成功的函数，第二个是失败的函数;
需要注意的是：

 jq的$.ajax返回的本身就是一个promise对象，可以直接调用then方法
 假设$.ajax返回的不是promise的话我们需要自己new Promise方法 ，才能调用then方法

例：

jq的$.ajax返回的本身就是一个promise对象，可以直接调用then方法
 $.ajax({url:"a.json",dataType:"json"}).then(res=>{

         },res=>{
            
         })
 假设$.ajax返回的不是promise的话我们需要自己new Promise方法 ，才能调用then方法
 function jqajax(resolve,reject){
            $.ajax({
                url:"a.json",
                dataType:"json",
                success(data){
                    resolve(data)
                },
                error(data){
                    reject(data)
                }
            })
        }
        var pro1=new Promise(jqajax)
        pro1.then(res=>{
            console.log(res)
        },res=>{
            console.log(res)
        })

用promise解决回调地狱的问题
1）回调地狱数据之间有关联的情况
eg：

 function jq_pro(url,data){
            return $.ajax({
               url,
               data,
               dataType:"json",

            })

        }

       jq_pro("a.json").then(res=>{
            return jq_pro("b.json")
       }).then(res=>{
            console.log(res);
            return jq_pro("c.json")
        }).then(res=>{
            console.log(res);
        })

2）回调地狱数据之间没有关系的情况：
当页面中有多个ajax请求的时候，而且他们之间没有关系，就可以用promise.all发送多个promise异步操作
eg：

 function jq_pro(url,data){
            return $.ajax({
                url,
                data,
                dataType:"json"
            })
        }

        Promise.all([   用于多个互相之间没有关系的ajax请求
            jq_pro("a.json"),
            jq_pro("b.json"),
            jq_pro("c.json")
        ]).then(res=>{
            console.log(res);   	得到的是一个数组  数组里请求的ajax的数据
            let [a,b,c]=res;  用数组解构提取数据
            delData1(a);
            delData1(b);
            delData1(c);

        })

        function delData1(res){
		console.log(res)
        }

3)异步操作计时器

  function set_pro(arg,time){
            return new Promise(function(resolve,reject){
                setTimeout(()=>{
                    var a=arg
                    resolve(a)
                },time)
            })
        }
        set_pro(10,1000).then(res=>{
        return set_pro(20+res,2000)
        }).then(res=>{
            return set_pro(res,3000)
         }).then(res=>{
            console.log(res);
         })

         Promise.all([
             set_pro(10,3000),
             set_pro(20,1000),
             set_pro(30,1000)
         ]).then(res=>{
             console.log(res);
         })

4 promise有三个状态：
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变，就会触发then()里的响应函数处理后续
5 方法：.then();
1、接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
2、.then()返回一个新的Promise实例，所以它可以链式调用
3、当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
4、状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
5、如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
6、如果返回其他任何值，则会立即执行下一级.then()