技術標籤：前端jsjavascript

promise正常呼叫

// 非同步方法，返回一個promise
function asynchronousFun(val){
	return new Promise((resolve,reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}



asynchronousFun("num01")
.then( res => {
	return asynchronousFun( res+"::num02"
 
);
})
.then( res => {
	return asynchronousFun( res +"::num03");
})
.then( res => {
	console.info("res是:"+res);
})
.catch( res => {
	console.error(res);
})

程式碼執行結果：res是:num01::num02::num03

reject情況

// 非同步方法，返回一個promise
function asynchronousFun(val){
	return new Promise((resolve,
 
reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}



asynchronousFun() // 此處不傳參，呼叫reject
.then( res => {
	console.info("第一次回撥函式執行");
	return asynchronousFun( res+"::num02");
})
.then( res => {
	console.info("第二次回撥函式執行");
	return
 
 asynchronousFun( res +"::num03");
})
.then( res => {
	console.info("第三次回撥函式執行");
	console.info("res是:"+res);
})
.catch( res => {
	console.error("發生錯誤::",res);
})

程式碼執行結果：

由執行結果可看出：一旦reject，直接被catch捕獲，後面的then都不會再執行。（reject相當於丟擲異常）
下面繼續測試，檢視控制檯輸出情況來驗證上述總結。

• 一旦reject，後臺面的then都不會執行

// 非同步方法，返回一個promise
function asynchronousFun(val){
	return new Promise((resolve,reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}



asynchronousFun("num01") 
.then( res => {
	console.info("第一次回撥函式執行");
	return asynchronousFun();// 此處不傳參，呼叫reject,檢查控制檯輸出
})
.then( res => {
	console.info("第二次回撥函式執行");
	return asynchronousFun( res +"::num03");
})
.then( res => {
	console.info("第三次回撥函式執行");
	console.info("res是:"+res);
})
.catch( res => {
	console.error("發生錯誤::",res);
})

• 手動丟擲異常（reject相當於丟擲異常）

// 非同步方法，返回一個promise
function asynchronousFun(val){
	return new Promise((resolve,reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}



asynchronousFun("num01") 
.then( res => {
	console.info("第一次回撥函式執行");
	throw new Error("丟擲一個異常"); //手動丟擲異常
})
.then( res => {
	console.info("第二次回撥函式執行");
	console.log("就到這裡吧");
	return "就到這裡吧";
})
.then( res => {
	console.info("第三次回撥函式執行");
	console.info("res是:"+res);
})
.catch( res => {
	console.error("發生錯誤::",res);
})

Promise鏈式呼叫

then()方法返回的是一個新的promise物件。

// 非同步方法，返回一個promise
function asynchronousFun(val){
	return new Promise((resolve,reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}
asynchronousFun("num01") 
.then( res => {
	console.info("第一次回撥函式執行");
	return asynchronousFun( res+"::num02");
})
.then( res => {
	console.info("第二次回撥函式執行");
	console.log("就到這裡吧");
	return "就到這裡吧";
})
.then( res => {
	console.info("第三次回撥函式執行");
	console.info("res是:"+res);
})
.catch( res => {
	console.error("發生錯誤::",res);
})

由執行結果可知，第二個then執行完成後，返回一個字串。後續的then依然能正確執行。就是因為then返回的是一個promise物件。而從列印結果可知：return返回的物件即為下一個then 回撥函式的引數。

• 來看看沒有return語句的情況

// 非同步方法，返回一個promise
function asynchronousFun(val){
	return new Promise((resolve,reject) => {
		if(val){
			resolve(val);
		}else{
			reject("error");
		}
	})
}



asynchronousFun("num01") 
.then( res => {
	console.info("第一次回撥函式執行");
	return asynchronousFun( res+"::num02");
})
.then( res => {
	console.info("第二次回撥函式執行");
	console.log("就到這裡吧");
	// 這裡什麼都不返回
})
.then( res => {
	console.info("第三次回撥函式執行");
	console.info("res是:"+res);
})
.catch( res => {
	console.error("發生錯誤::",res);
})