Promise 解决回调地狱问题

1、Promise解决回调地狱的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.3.1.min.js"></script>
</head>
<body>
    <script>
        var p = new Promise((resolve, reject) => {
            $.ajax({
                type:"GET",
                url:"./data1.json",
                success:function(res){
                    resolve(res);
                }
            });
        });
        p.then((value)=>{
            console.log(value);
            return new Promise((resolve, reject) => {
                    $.ajax({
                    type:"GET",
                    url:"./data2.json",
                    success:function(res){
                        resolve(res);
                    }
                });
            });
        }).then((value)=>{
            console.log(value);
            return new Promise((resolve, reject) => {
                $.ajax({
                    type:"GET",
                    url:"./data3.json",
                    success:function(res){
                        resolve(res);
                    }
                });
            });
        }).then((value)=>{
            console.log(value);
        });
    </script>
</body>
</html>

2、Promise解决回调地狱代码的优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.3.1.min.js"></script>
</head>
<body>
    <!--解决回调地狱的问题-->
    <script>
        //封装一个Ajax请求的方法
        function getData(url,data={}){
            return new Promise((resolve, reject) => {
                //发起Ajax请求
                $.ajax({
                    type:'GET',//请求的方式
                    data:data,//请求的参数
                    success:function (res){//请求成功后的回调函数
                        resolve(res); //resolve进行成功后数据的保存
                    },
                    error:function (res){//请求失败后的回调函数
                        reject(res); //reject进行失败后数据的baocun 
                    }
                });
            });
        };

        //通过ajax请求Id，再根据id请求用户名,再根据用户名去获取用户的邮箱
        //1、通过ajax请求Id
        getData("data1.json").then((value)=>{
            const {id} = value;
            console.log(value);
            //2、再根据id请求用户名
            return getData("data2.json",{id});
        }).then((value)=>{
            const { name } = value;
            console.log(value);
            //3、再根据用户名去获取用户的邮箱
            return getData("data3.json",{name});
        }).then((value)=>{
            const { email } = value;
            console.log(value); 
        }); 
    </script>
</body>
</html>

posted on 2020-12-06 21:49 甘茂旺阅读(89) 评论(0) 编辑收藏举报