[TOC] ## Promise--清除異步操作 ~~~ //Promise.all()裝載promise對象 let b = $.ajax({url:"json/a.txt",dataType:"json"}); let a = $.ajax({url:"json/b.txt",dataType:"json"}); Promise.all([a,b]).then(function(results){ let [res1,res2] = results; console.log(res1); console.log(res2); },function(err){ //fail console.log(err.status) ~~~ >用同步一樣的方式,來書寫異步代碼 ~~~ let p = new Promise(function(resovle,reject){ //resolve--成功 //reject--失敗 $.ajax({ url:"json/a.tt", dataType:"json", success(data){ resovle(data); }, error(err){ reject(err); } }) }) p.then(function(data){ //success console.log(data); },function(err){ //failCode alert(err.status) }) ~~~ ## 1.Promise.all() ~~~ //語法 Promise.all([a,b]).then(function(arr){ //success let [res1,res2]=arr; },function(){ //failcode }) ~~~ #### 1.1 使用 ~~~ let a = new Promise(function (resovle, reject) { //resolve--成功 //reject--失敗 $.ajax({ url: "json/a.txt", dataType: "json", success(data) { resovle(data); }, error(err) { reject(err); } }) }) let b = new Promise(function (resovle, reject) { //resolve--成功 //reject--失敗 $.ajax({ url: "json/b.txt", dataType: "json", success(data) { resovle(data); }, error(err) { reject(err); } }) }) Promise.all([a,b]).then(function(arr){ //全都成功執行以下代碼,成功的參數傳人arr,返回數組 let [res1,res2]=arr; console.log(res1); console.log(res2); },function(){ alert("fail") }) ~~~ #### 1.2 封裝Promise ~~~ function createPromise(url) { return new Promise(function (resovle, reject) { //resolve--成功 //reject--失敗 $.ajax({ url, dataType: "json", success(data) { resovle(data); }, error(err) { reject(err); } }) }) } var a = createPromise("json/a.txt"); var b = createPromise("json/b.txt"); Promise.all([a,b]).then(function (arr) { //全都成功執行以下代碼,成功的參數傳人arr,返回數組 let [res1, res2] = arr; console.log(res1); console.log(res2); }, function () { alert("fail") }) ~~~ #### 1.3高版本的jquery,ajax本身就是promise對象 >Tip:不用封裝 ~~~ let b = $.ajax({url:"json/a.txt",dataType:"json"}); let a = $.ajax({url:"json/b.txt",dataType:"json"}); Promise.all([a,b]).then(function(results){ let [res1,res2] = results; console.log(res1); console.log(res2); },function(err){ //fail console.log(err.status) }) ~~~