异步请求数据——promise

1.1promise

1.1.1promise解决了什么问题

• 主要解决异步深层嵌套的问题

• promise 提供了简洁的API  使得异步操作更加容易

1.1.2基于Promise发送Ajax请求解决回调地狱

<button id="btn">点击，发送异步请求</button>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <!-- 在ajax请求中，再嵌套ajax请求，这个就叫回调地狱 -->
    <script>
        $(function(){
            var apiUrl1='./data/list1.json'
            var apiUrl2='./data/list2.json'
            $('#btn').click(function(){
                $.ajax({
                    url:apiUrl1,
                    type:'get',
                    dataType:'json',
                    success:function(result){
                        // console.log(result);
                        let {uid}=result;
                        console.log(uid);

                        //在发送异步请求的时候，同时传参过去
                        $.ajax({
                            url:apiUrl2,
                            type:'get',
                            dataType:'json',
                            data:{uid:uid},
                            success:function(result){
                                console.log(result);
                            }
                        })
                    }
                })
            })
        })
    </script>

//list1.json
{
    "uid":1
}

//list2.json
{
    "name":"小马过河"
}

预览：

<script>
        {  //new 构造函数 创建promise
            let p1= new Promise(function(){

        })
            console.dir(p1);}

        {
            let p2= new Promise(function(resolve,reject){
                //调用resolve()这个回调函数时，Promise状态是fullfilled（成功）
                resolve()

        })
            console.dir(p2);
        }

        {
            let p3= new Promise(function(resolve,reject){
                //调用reject()这个回调函数时，Promise状态是
                //延时定时器
                setTimeout(function(){
                    let flag=false;
                    if(flag){
                        resolve('正常')

                    }else{
                        reject('出错了')
                    }
                },1000)
               
        })
            console.dir(p3);
            //then()方法里两个回调
            //第一个回调输出的是resolve()异步执行成功的结果,
            //第二个回调函数输出的是reject()异步执行失败的结果
            p3.then(
            //第一个回调
                (data)=>{
                console.log(data);
            },
            //第二个回调
            (data)=>{
                console.log(data);
            })
        }
       
    </script>

预览：