Promise

PROMISE:承诺：承诺本身(正在进行时)，成功，失败

问题：当前有三个接口，要求，使用ajax请求三个接口，最终要在一个方法中拿到三个接口返回的数据？

方法1：回调地域

  ajax({
         url:url1,
         success:function(res1){
             ajax({
                 url:url2,
                 success:function(res2){
                     ajax({
                         url:url3,
                         success:function(res3){
                              fn(res1,res2,res3)
                         }
                     })
                 }
             })
         }
     })
     function fn(res1,res2,res3){
         console.log(res1,res2,res3)
     }

方法2：利用promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // Promise改造ajax，实现，多请求，成功之后拿到所有数据
    // 不使用回调地域

    function ajax(url){
        var p = new Promise(function(s,e){//执行promise中的成功和失败，ajax中的成功和失败参数就不用写了。
            var xhr = new XMLHttpRequest();
            xhr.open("get",url,true);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    s(xhr.responseText)
                }else if(xhr.readyState == 4 && xhr.status != 200){
                    e(xhr.status)
                }
            }
            xhr.send();
        })
        return p; //必须要return，因为是在ajax这个函数中
    }
    
    var p1 = ajax(""); //第一个promise对象
    var p2 = ajax(""); //第二个promise对象
    var p3 = ajax(""); //第三个promise对象
    
    Promise.all([p1,p2,p3]).then(function(res){ //将p1,p2,p3都传入Promise.all要用数组的形式。都成通过then。都成功,执行第一个回调函数。
        console.log(res) //自动放在数组里。["hello1","hello2","hello3"]
    },function(res){
        console.log(res) //有一个失败就返回错误的信息
    })


</script>
</html>

利用计时器模仿ajax；使用promise处理

 var p = new Promise(function(success,error){
        // 正在进行时...
        // ajax的正在请求...

        // 如果ajax成功了,这里用计时器模拟ajax。若第一个随机时间段免责说明他执行成功了。第二个端，说明执行失败了。计时器没被清空，只是方法被清空了。只能有一个状态。
        setTimeout(() => {
//            console.log(1)
            success();
        }, Math.random()*1000);

        // 如果ajax失败了
        setTimeout(() => {
//            console.log(2)
            error();
        }, Math.random()*1000);

    });
    // 承诺的后续，然后呢？then的第一个参数，成功的函数，第二个参数，失败的函数
    p.then(function(){
        console.log("成功")
    },function(){
        console.log("失败")
    })