ES6-promise异步编排

最新推荐文章于 2023-12-22 12:48:48 发布

camma

最新推荐文章于 2023-12-22 12:48:48 发布

阅读量147

点赞数

分类专栏： JS 文章标签： Promise Ajax 异步操作数据查询 JSON

本文链接：https://blog.csdn.net/weixin_42594968/article/details/119764521

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<script>

        //1、查出当前用户信息
        //2、按照当前用户的id查出他的课程
        //3、按照当前课程id查出分数
		
		//原始写法：
        // $.ajax({
        //     url:"mock/user.json",
        //     success(data){
        //         console.log("查询用户",data);
        //         $.ajax({
        //             url:`mock/user_corse_${data.id}.json`,
        //             success(data){
        //                 console.log("查询到课程：",data);
        //                 $.ajax({
        //                     url: `mock/corse_score_${data.id}.json`,
        //                     success(data) {
        //                         console.log("查询到分数：", data);
        //                     },
        //                     error(error) {
        //                         console.log("出现异常了：" + error);
        //                     }
        //                 });

        //             },
        //             error(error){
        //                 console.log("出现异常了：" + error);
        //             }
        //         });
        //     },
        //     error(error){
        //                 console.log("出现异常了：" + error);
        //             }

        // });
   
   
        //1、Promise可以封装异步操作
        // let p = new Promise((resolve,reject)=>{
        //     //1、异步操作
        //     $.ajax({
        //         url:"mock/user.json",
        //         success:function(data){
        //             console.log("查询用户成功",data);
        //             resolve(data);
        //         },
        //         error:function(err){
        //             reject(er);
        //         }
        //     });  
        // });

        // p.then((obj)=>{
        //     return new Promise((resolve,reject)=>{
        //     $.ajax({
        //         url:`mock/user_corse_${obj.id}.json`,
        //         success:function(data){
        //             console.log("查询用户课程成功",data);
        //             resolve(data);
        //         },
        //         error:function(err){
        //             reject(err);
        //         }
        //     });
        //    })
        // }).then((data)=>{
        //     console.log("上一步的结果",data);
        //     $.ajax({
        //         url:`mock/corse_score_${data.id}.json`,
        //         success:function(data){
        //             console.log("查询课程得分成功",data);
        //         },
        //         error:function(err){
        //         }
        //     });
        // })


        function get(url,data){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url:url,
                    data:data,
                    success:function(data){
                        resolve(data);
                    },
                    error:function(err){
                        reject(err);
                    }
                })
            });
        }

        get("mock/user.json")
            .then((data) => {
                console.log("用户查询成功~~~",data)
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功~~~",data)
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程成绩查询成功~~~",data)
            })
            .catch((err)=>{
                console.log("出现异常",err)
            });

   </script>