序

在非同步方法執行後再執行的直接解決方案就是寫回調。

可是如果想讓所有的（例如迴圈呼叫的若干次）非同步方法全部執行完之後再執行接下來的方法該怎麼辦呢？

本文基於Promise語法，給出解決方案。

接著上一篇的例子，我們先來看一下有問題的寫法。

有問題的寫法：

var request = require('request');

// 非同步獲取網路資源的方法
getWeb = (index, getCallback) => {
	var url = 'http://www.duzixi.com';

	request(url, function (error, response, body) { 
		if (!error && response.statusCode == 200) 
		{    
			getCallback(body);
			return body;
				
		} else {
			console.log(response.statusCode + " " + error);
			getCallback("");
			return "";
		}
	})
}

// 迴圈呼叫
for (var i = 0; i <= 10; i++) {
	((index)=>{
		getWeb(index, (body)=>{
			console.log(index);
		})
	})(i)
}

console.log("All done!");
 

神奇的執行結果：

All done!
1
2
3
0
4
6
5
7
9
8
10

原因相比不用多說大家也知道，由於非同步方法是花費時間的，所以輸出事件後發生。

問題的解決方案：

這個問題的解決方案就是Promise，迴圈呼叫部分的原始碼修改如下：

var actions = [];  // 定義一個空的方法陣列

// 迴圈呼叫
for (var i = 0; i <= 10; i++) {
	var action = () => { // 將每一次迴圈方法定義為一個方法變數
		return new Promise(resolve =>{ // 每個方法返回一個Promise物件，第一個引數為resolve方法
			((index)=>{
				getWeb(index, (body)=>{
					console.log(index);
					resolve();          // 在方法結束時呼叫resolve()方法
				})
			})(i)

		})
	}
	actions.push(action());  // 將每次迴圈呼叫的方法新增到方法陣列中
}

Promise.all(actions).then(()=>{ // 呼叫Promise的all方法，傳入方法陣列，結束後執行then方法引數中的方法
	console.log("All done!");
});
 

8
7
5
9
4
1
10
6
2
3
0
All done!

最後，感謝小紅幫助解答了該問題。