ES6基础入门（四)—— promise的使用实例

最新推荐文章于 2024-05-05 22:11:34 发布

原创最新推荐文章于 2024-05-05 22:11:34 发布 · 174 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ES6

es6 专栏收录该内容

17 篇文章

订阅专栏

本文通过一个商城案例，详细介绍了如何使用Promise进行异步请求处理，包括商品信息和评论的获取过程。展示了从传统回调到Promise的优雅过渡，提高了代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

promise商城案例

promise商城案例
<script>
///es5
$(function(){
$.ajax({
url:"http://localhost:3000/goods_detail",
data:{id:2},
dataType:"json",
success:function(data){
    cosole.log(data)
    //请求商品评论
    $.ajax({
        url:"http://localhost:3000"+data.commentsUrl,
        dataType:"json",
        success:function(data){
            console.log(data);
        },
        error:function(error){
            alert("商品评论请求失败");
        }
    })
},
error:function(error){
    alert("商品信息请求失败")
}
})
})

//es6:promise
let pro = new Promise((resolve,reject)=>{
    //promise处于等待状态
//请求商品信息
$.ajax({
    url:"http://localhost:3000/goods_detail",
    data:{id:2},
    dataType:"json",
    success:function(data){
        console.log(data)
        //商品信息请求成功的时候，调用promise的resolve方法
        //让promise进入请求成功的状态
        resolve(data);
    },
    error:function(){
        reject();
    }
})
})
pro.then(
    data =>{
        //发送ajax请求商品评论
        $.ajax({
            url:`http://localhost:3000${data.commentUrl}`,
            dataType:"json",
            success:function(data){
                console.log(data);
            },
            error:function(){
                alert("商品评论请求失败");
            }
        })
    },
    error =>{
         //发送ajax请求商品评论失败
         alert("商品信息请i求失败，不请求评论了")
    }
)
</script>