Promise--异步请求

最新推荐文章于 2025-07-01 21:11:04 发布

原创最新推荐文章于 2025-07-01 21:11:04 发布 · 586 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#promise

晴天有点孤单同时被 2 个专栏收录

124 篇文章

订阅专栏

ES6

1 篇文章

订阅专栏

本文探讨了使用JavaScript Promise进行异步操作的两种方式：通过Promise链依次执行异步请求和利用Promise.all方法同时处理多个异步操作。通过具体代码示例展示了如何使用$.ajax发起异步请求，并在请求成功或失败时调用resolve或reject。

先执行getData1，在执行getData2

let getData1=new Promise(function(resolve,reject){
    $.ajax({
        type:"get",
        url:".../getData1",
        success:function(data){
            if(data.state=="200"){
                resolve(data.data) // 在异步操作成功时调用
            }else{
                reject(data.msg); //在异步操作失败时调用
            }
        }
    });
})
let getData2=new Promise(function(resolve,reject){
    $.ajax({
        type:"get",
        url:".../getData2",
        success:function(data){
            if(data.state=="200"){
                resolve(data.data) // 在异步操作成功时调用
            }else{
                reject(data.msg); //在异步操作失败时调用
            }
        }
    });
})
getData1.then(function(res){
　　return getData2(res)
}).then(function(res){
　　console.log(res)
}).catch(function(err){
　　console.log(err)
})

先执行getData1和getData2，在执行getData3

let getData3=new Promise(function(resolve,reject){
    $.ajax({
        type:"get",
        url:".../getData3",
        success:function(data){
            if(data.state=="200"){
                resolve(data.data) // 在异步操作成功时调用
            }else{
                reject(data.msg); //在异步操作失败时调用
            }
        }
    });
})

Promise的all方法，等数组中的所有promise对象都完成执行

Promise.all([getData1,getData2]).then(function([ResultJson1,ResultJson2]){
    //这里写等这两个ajax都成功返回数据才执行的业务逻辑
　　getData3()
})