兩個問題:
1.有三個ajax請求,如何讓這三個ajax請求串列執行,即第一個執行完成後在執行另一個。
2.如何讓他們並存執行,然後三個請求都執行完成後,再執行某個操作。
//串列執行分兩種。 //一是用同步模式async: false,三個ajax請求連著寫就可以了。 $.ajax({ url: "ajax請求1", async: false, success: function (data) { console.log("ajax請求1 完成"); } }); $.ajax({ url: "ajax請求2", async: false, success: function (data) { console.log("ajax請求2 完成"); } }); $.ajax({ url: "ajax請求3", async: false, success: function (data) { console.log("ajax請求2 完成"); } }); //二是用非同步模式async: true,三個ajax請求嵌套寫。 $.ajax({ url: "ajax請求1", async: true, success: function (data) { console.log("ajax請求1 完成"); $.ajax({ url: "ajax請求2", async: true, success: function (data) { console.log("ajax請求2 完成"); $.ajax({ url: "ajax請求3", async: true, success: function (data) { console.log("ajax請求3 完成"); } }); } }); } }); //並存執行就只能用非同步模式。並設定變數進行計數 var num = 0; function isAllSuccess() { num++; if (num>=3) console.log("三個ajax請求全部完成"); } $.ajax({ url: "ajax請求1", async: true, success: function (data) { console.log("ajax請求1 完成"); isAllSuccess(); } }); $.ajax({ url: "ajax請求2", async: true, success: function (data) { console.log("ajax請求3 完成"); isAllSuccess(); } }); $.ajax({ url: "ajax請求3", async: true, success: function (data) { console.log("ajax請求3 完成"); isAllSuccess(); } });
目前ES6中Promise可以用.then鏈也可以實現多層非同步回調的問題,ES7中的Async和Await解決了.then鏈複雜的寫法。await是等待一個Promise對象或者一個運算式的值;如果await等待的是一個Promise對象,那麼就會阻塞後面的代碼來等待Promise對象resolve,等resolve完成將resolve結果返回實現回調;這樣的話,用一個aync和多個await就可以輕鬆的完成多層嵌套非同步回調,且寫法優雅,代碼簡單。
我的Github上有案例源碼:https://github.com/spicyboiledfish/JavaScript-testJS/blob/master/53.全面理解ES6中的Promise.html
具體詳解請查看下面兩篇部落格:
ES6中的Promise: http://www.cnblogs.com/lvdabao/p/es6-promise-1.html
ES7中的async和await:http://blog.csdn.net/hj7jay/article/details/61191416