在两个异步的ajax执行完之后进行一些操作

缺乏、安全感 2021-10-24 06:24 423阅读 0赞

按照一般的操作我们可能就是使用ajax的嵌套。一个ajax的请求成功里面嵌套第二个ajax。然后在最后一个成功时进行操作。

类似下面这种的

$.ajax({
            url: "/home/GetProduct",
            dataType: "JSON",
            type: "GET",
            success: function (data) {
                $.ajax({
                    url: "/home/GetProduct",
                    dataType: "JSON",
                    type: "GET",
                    success: function (data) {
                        //在这里写我要执行的操作啊。。。。
                    }
            }

这样的嵌套无疑能解决问题.但是，多层嵌套可能会影响页面的加载速度。

我们现在有了更加优化方便的方法啦。那就是使用**jq的$.when().done()  done是在when里面的ajax都执行完以后才会执行的。**

### **$.when( $.ajax( ),$.ajax( )).then(function()\{\}).fail(function()\{\})** ###

$.when(  
                $.ajax(\{  
                    url:"https://api.vvwx.net/studentclient/schoolzone/allzone",  
                    data:JSON.stringify(\{schid: "19"\}),  
                    type:'POST',  
                    dataType:'JSON',  
                    success:function(res)\{  
                        console.log("000")  
                    \},  
                \}),   
                $.ajax(\{  
                url:"https://api.vvwx.net/studentclient/homepage/allnavigationicon",  
                data:JSON.stringify(\{schid: "19",subtype: "11"\}),  
                type:'POST',  
                dataType:'JSON',  
                success:function(res)\{  
                    console.log("111")  
                \},  
             \})  
                ).done(function(a1,  a2)\{//成功执行  
                console.log("success");  
          \}).fail(function()\{//失败执行  
               console.log("fail")  
          \});

执行以后试试。两个ajax因为是异步不一定那个先执行完。但是console.log("success");一定是在000.111之后打印的。

此外除了这个方法还有es6 的promise方法也是可以的。

### **Promise.all(\[promise1,promise2\]).then(function()\{\})** ###

> function getAjax()\{  
>              var p = new Promise(function(resolve, reject)\{  
>                 $.ajax(\{  
>                     url:"https://api.vvwx.net/studentclient/schoolzone/allzone",  
>                     data:JSON.stringify(\{schid: "19"\}),  
>                     type:'POST',  
>                     dataType:'JSON',  
>                     success:function(res)\{  
>                         console.log("000")  
>                         resolve(res);  
>                     \},  
>                 \})  
>              \});  
>               return p;       
>             \}  
>               
>             function getAjax2()\{  
>             var p = new Promise(function(resolve, reject)\{  
>                 $.ajax(\{  
>                 url:"https://api.vvwx.net/studentclient/homepage/allnavigationicon",  
>                 data:JSON.stringify(\{schid: "19",subtype: "11"\}),  
>                 type:'POST',  
>                 dataType:'JSON',  
>                 success:function(res)\{  
>                     console.log("111")  
>                     resolve(res)  
>                 \},  
>              \})  
>             \})  
>             return p;  
>             \}

> Promise  
> .all(\[getAjax(), getAjax2()\])  
> .then(function(results)\{
> 
>    console.log("success");  
>     console.log(results);  
> \});

![20190821175048886.png][]

[20190821175048886.png]: /images/20211023/9d7bbfbae845409f968e4253930dd9e8.png