異步編程--Promise任務鏈

講解Promise任務鏈之前先看一個例子

        new Promise( (resolve, reject) => {
			reject();
		} ).then( 
			() => {
				console.log('resolve', 1);
			},
			() => {
				console.log('reject', 2);
			}
		).then( 
			() => {
				console.log('resolve', 3);
			},
			() => {
				console.log('reject', 4);
			}
		);

猜猜控制檯會打印什麼東西呢，正確答案是

'reject', 2

'resolve', 3

想知道爲什麼，繼續往下看

Promise Chain     

      then函數執行後會返回一個新的Promise對象

如果then沒有傳入處理函數，那麼會返回一個繼承了上一個處理狀態的 Promise 對象

new Promise( (resolve, reject) => {
			reject();
		} ).then().then(() => {
			console.log(1)
		},() => {
			console.log(2)
		})

上面代碼會打印2。

如果then傳入處理函數，那麼默認返回一個 fulfilled/resolved 狀態的 Promise 對象

new Promise( (resolve, reject) => {
			reject();
		} ).then(() => {
			console.log(1);
		},() => {
			console.log(2)
		}).then(() => {
			console.log(3)
		},() => {
			console.log(4)
		})

上面代碼會打印2,3

如果then傳入了處理函數，通過處理函數顯示的return了一個新的 Promise，那麼返回這個顯示的 Promise 對象

new Promise( (resolve, reject) => {
			reject();
		} ).then(() => {
			console.log(1);
		},() => {
			console.log(2);
			return new Promise((resolve, reject) => {
				reject();
			})
		}).then(() => {
			console.log(3);
		},() => {
			console.log(4);
		})

上面代碼會打印2,4。

到這裏一開始的問題就清楚了。但是，還會導致一個問題

問題：         

不易中途終止後續任務執行

看下面一個例子就知道了

	<script type="text/javascript">

		new Promise( (resolve, reject) => {
			resolve();
		} )
		.then(() => {
			console.log('登錄成功')
			// 獲取權限
			return new Promise( (resolve, reject) => {	
				if (false) {	//是否是管理員
					resolve();
				} else {
					reject();
				}
			} )
		},() => {
			console.log('登錄失敗')
		})
		.then(() => {
			console.log('是管理員')
			// 獲取資源
			return new Promise( (resolve, reject) => {
				resolve();
				// reject();
			} )
		},() => {
			console.log('不是管理員')
		})
		.then(() => {
			console.log('拿到資源')
		},() => {
			console.log('不能獲取資源')
		});


	</script>

打印結果爲

上面當他不是管理員的時候，我們根本就不想讓他拿到資源，甚至都不想發這個請求，那怎麼辦呢？ 

.catch方法     

處理 rejected 的情況，與 then 的第二個參數 onRejected 相同     

返回一個 Promise 對象，狀態默認爲 fulfilled/resolved     

可以捕獲 catch 之前的 Promise Chain 中的任一錯誤（如果 Promise Chain 中的 then 沒有處理的話）

	<script type="text/javascript">

		new Promise( (resolve, reject) => {
			resolve();
		} )
		.then(() => {
			return new Promise( (resolve, reject) => {
				reject('登錄失敗');
			} )
		})
		.then(() => {
			console.log('是管理員')
		})
		.then(() => {
			console.log('拿到資源')
		}).catch(err => {
			console.log(err);
		}).then(() => {
			console.log('catch以後')
		});


	</script>