Promise 序列呼叫面試題

最新看到一個比較有趣的面試題：

怎麼序列執行 Promise ?

這裡簡單給大家介紹下解答。針對多個 Promise 方法，原生提供了 all 和 race 方法。但是，他們都不是序列執行。那應該如果執行序列方法？這裡介紹兩種寫法：

遞迴執行

簡單來說就是在 then 方法裡面遞迴傳遞下一次非同步方法：then(next())

function iteratorPromise(arr){

	(function iter(){
		if(arr.length)
			arr.shift()().then(iter)
	})()
}

let arr = [()=>{
	return new Promise(res=>{
		console.log("run", Date.now());
		res()
	})
},()=>{
	return new Promise(res=>{
		console.log("run", Date.now());
		res()
	})
},()=>{
	return new Promise(res=>{
		console.log("run", Date.now());
		res()
	})
}]

iteratorPromise(arr);

// output
run 1529918098567
run 1529918098568
run 1529918098569
複製程式碼

迴圈呼叫

這種辦法比較取巧，直接利用 Promise.resolve()。通過迴圈賦值，得到最終的結果。

function iteratorPromise(arr){

	let res = Promise.resolve();

	arr.forEach(fn=>{
		res = res.then(()=>fn()) // 關鍵是 res=res.then... 這個邏輯
	})
}

let arr = [()=>{
	return new Promise(res=>{
		setTimeout(()=>{
			console.log("run", Date.now());
			res()
		},1000)
		
	})
},()=>{
	return new Promise(res=>{
		setTimeout(()=>{
			console.log("run", Date.now());
			res()
		},1000)
		
	})
},()=>{
	return new Promise(res=>{
		setTimeout(()=>{
			console.log("run", Date.now());
			res()
		},1000)
		
	})
}]

iteratorPromise(arr);


// output
run 1529918643573
run 1529918644574
run 1529918645580
複製程式碼