技術標籤：es6es6

2020.12.9 03：39

Promise

• • 非同步和同步
  • Promise 物件
  • Promise 也是一個建構函式
  • Promise怎麼用
  • Promise.all([])方法
  • Promise.race([])方法
  • 鏈式操作

非同步和同步

• 非同步，操作之間沒有關係，同時執行多個操作， 程式碼複雜
• 同步，同時只能做一件事，程式碼簡單

Promise 物件

• 用同步的方式來書寫非同步程式碼
• Promise 讓非同步操作寫起來，像在寫同步操作的流程，不必一層層地巢狀回撥函式
• 改善了可讀性，對於多層巢狀的回撥函式很方便
• 充當非同步操作與回撥函式之間的中介，使得非同步操作具備同步操作的介面

Promise 也是一個建構函式

• 接受一個回撥函式作為引數，回撥函式裡面是非同步操作的程式碼
• 返回的p就是一個 Promise 例項物件
• 所有非同步任務都返回一個 Promise 例項物件
• Promise 例項物件有一個then方法，用來指定下一步的回撥函式

function add(resolve, reject) {
  // 非同步程式碼...
}
var p = new Promise(add);
p.then(()=>{//非同步操作執行完成，就會執行then的回撥函式
	//非同步請求成功操作
},()=>{
	//非同步請求失敗操作
});

Promise 使得非同步流程可以寫成同步流程

// 傳統寫法
step1(function (value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        // ...
      });
    });
  });
});

// Promise 的寫法
(new Promise(step1))
  .then(step2)
  .then(step3)
  .then(step4);

Promise怎麼用

通過Promise請求資料

let p=new
 
 Promise((resolve,reject)=>{
	$.ajax({//jq的$.ajax()
		url:'data/arr.txt',//本地檔案
		dataType:'json',
		success(data){
			resolve(data);
		},
		error(error){
			reject(err);
		}
	});
});
p.then(data=>{//請求成功執行,實際上就是resolve
	console.log(`請求成功`);
	console.log(data);
},
	()=>console.log(`請求失敗`)//請求失敗執行,實際上就是reject
);

Promise.all([])方法

• 接受一個數組作為引數
• 將多個Promise物件例項包裝，生成並返回一個新的Promise例項
• promise陣列中所有的promise例項都變為resolve的時候，該方法才會返回
  並將所有結果傳遞results陣列中
• promise陣列中任何一個promise為reject的話，則整個Promise.all呼叫會立即終止，並返回一個reject的新的promise物件

var p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results);  // [1, 2, 3]
});

Promise.race([])方法

• 接受一個數組作為引數
• Promse.race就是賽跑的意思
• 哪個結果獲得的快，就返回那個結果
• 不管結果本身是成功狀態還是失敗狀態

鏈式操作

Promise.all([
	$.ajax({url:'https://api.imjad.cn/cloudmusic/?type=detail&id=478963730',dataType:'json'}),
	$.ajax({url:'https://api.imjad.cn/cloudmusic/?type=detail&id=28012031',dataType:'json'})
]).then(data=>data).then(data=>{//連續呼叫兩次then方法
	console.log(data);
	return data;
}).then(data=>{//進行判斷
	let name=data[0].songs[0].name;
	console.log(name);
	return name=='狂徒'?'第一首歌是狂徒':'第一首歌是其他歌曲';
}).then(data=>console.log(data));

通過then方法處理帶邏輯性的事情，例如通過return將資料返回，再呼叫then方法進行邏輯判斷，再根據判斷的結果決定執行哪些事

部分內容轉載自:參考