ES6 Promise的基本認識

promise中一般是處理一些異步事件，包括resolve和reject兩個參數

resolve表示執行成功的回執，reject表示執行失敗的回執

promise的默認狀態爲Padding，reolve則是將promise的狀態變爲Fullfilled, reject是將狀態變爲Rejected

示例：

getNumber() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			let num = Math.floor(Math.random() * 10);
			if (num < 5) resolve({ result: 'lt', num })
			else reject({ result: 'gt', num });
		}, 2000);
	})
}

this.getNumber().then((data) => {
	console.log(`${data.num}低於中間值`);
}, (data) =>{
	console.log(`${data.num}高於中間值`);
})

鏈式操作

async_1() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log(`異步任務1執行完成`);
			resolve(1);
		}, 1000);
	})
},
async_2() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log(`異步任務2執行完成`);
			resolve(2);
		}, 2000);
	})
},
async_3() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log(`異步任務3執行完成`);
			resolve(3);
		}, 3000);
	})
}

this.async_1().then((data) => {
	console.log(data);
	return this.async_2();
}).then((data) => {
	console.log(data);
	return this.async_3();
}).then((data) => {
	console.log(data);
})

運行結果：

異步任務1執行完成
1
異步任務2執行完成
2
異步任務3執行完成
3

Promise一般外面會包一層函數，Promise提供一些方法：

1. then

then中接收兩個參數，一個是狀態爲Fullfilled的回執，一個是狀態爲Rejected的回執

2. catch

可用來捕獲異常，使程序正常往下執行

runAsync() {
	const p = new Promise(function(resolve, reject) {
		setTimeout(() => {
			console.log('timeout');
			resolve({ result: 'success' });
		}, 1000);
	});
	return p;
}

this.runAsync().then((data) => {
	console.log('data', data);
	console.log(result);    // 未定義的變量，會拋出異常
}).catch((reason) => {
	console.log('reject', reason);    // 捕獲異常
});

運行結果：

reject ReferenceError: result is not defined
    at eval (PageCompt.vue?f6cd:63)

3. all

接收一組Promise,並行執行，在一個回調中處理所有返回的數據

實例：

Promise.all([this.async_1(), this.async_2(), this.async_3()]).then((data) => {
	console.log(data);
})

運行結果：

異步任務1執行完成
異步任務2執行完成
異步任務3執行完成
[1, 2, 3]

注： 只有當所有的Promise都執行成功時纔會執行第一個回調，若其中有Rejected狀態的Promise則會在第二個回調中被處理

修改第二個異步方法：

async_2() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log(`異步任務2執行完成`);
			reject(2);
		}, 2000);
	})
}

Promise.all([this.async_1(), this.async_2(), this.async_3()]).then((data) => {
	console.log(data);
}, (reason) => {
	console.log('reason', reason);
})

運行結果：

異步任務1執行完成
異步任務2執行完成
reason 2
異步任務3執行完成

4. race

同樣是並行，但是隻處理最先完成的數據

 

參考：https://www.cnblogs.com/whybxy/p/7645578.html