Web前端 -- ES6 -- Promise

Web前端 -- ES6 -- Promise

服务器模拟数据

studen.json
{
  "id": 100,
  "name": "jack",
  "class_id": 10
}

class_10.json
{
  "id": 10,
  "name": "java工程师班级",
  "student_num": 30,
  "school_id": 9
}

studen.json
{
  "id": 100,
  "name": "jack",
  "class_id": 10
}

ajax回调地狱

    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            url: "studen.json",
            success(replyData) {
                console.log("1replyData = ", replyData);
                $.ajax({
                    url: `class_${replyData.class_id}.json`,
                    success(replyData) {
                        console.log("2replyData = ", replyData);
                        $.ajax({
                            url: `school_${replyData.school_id}.json`,
                            success(replyData) {
                                console.log("3replyData = ", replyData);
                            },
                            error(err) {
                                console.log("err = ", err);
                            }
                        })
                    },
                    error(err) {
                        console.log("err = ", err);
                    }
                })
            },
            error(err) {
                console.log("err = ", err);
            }
        })
    </script>

使用Promise重排改善

<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //Promise重排抽取模板工具方法
        function getPromise(url, data){
            return new Promise((resolve, reject) =>{
                $.ajax({
                    url:url,
                    data: data,
                    success(replyData){
                        resolve(replyData)
                    },
                    error(err){
                        reject(err)
                    }
                })
            })
        }

        //实现代码
        getPromise("studen.json")
            .then(replyData => {
                console.log("1replyData = ", replyData)
                return getPromise(`class_${replyData.class_id}.json`)
            })
            .then(replyData => {
                console.log("2replyData = ", replyData)
                return getPromise(`school_${replyData.school_id}.json`)
            })
            .then(replyData => {
                return console.log("3replyData = ", replyData)
            })
            .catch(err => {
                console.log("err=",err)
        })

    </script>