기존 Promise 강의(http://idlecomputer.tistory.com/147?category=791974) 이후 강의 입니다.
javascript 를 사용 하다보면
단순 동기화가 아닌
동적인 배열을 받아서 배열 많큼 반복문을 해주는데 이 반복문을 동기화 시켜서 프로그램을 작성해야 할때가 있습니다.
기존의 promise ALL (출처 : http://programmingsummaries.tistory.com/325)
var promise1 = function () {
return new Promise(function (resolve, reject) {
// 비동기를 표현하기 위해 setTimeout 함수를 사용
window.setTimeout(function () {
// 해결됨
console.log("첫번째 Promise 완료");
resolve("11111");
}, Math.random() * 20000 + 1000);
});
};
var promise2 = function () {
return new Promise(function (resolve, reject) {
// 비동기를 표현하기 위해 setTimeout 함수를 사용
window.setTimeout(function () {
// 해결됨
console.log("두번째 Promise 완료");
resolve("2222");
}, Math.random() * 10000 + 1000);
});
};
Promise.all([promise1(), promise2()]).then(function (values) {
console.log("모두 완료됨", values);
});
에서 처럼 사용 할수 있지만 이방식은 순자척 실행이 아니라 한꺼번에 실행 한 후에 완료 처리를 받는 것입니다.
이러한 방식으로 사용 할때도 있지만
반복문을 순차적으로 할때는 적절하지 않습니다.
자료 참조 : https://stackoverflow.com/questions/31413749/node-js-promise-all-and-foreach
에 답변의 소스를 분석 하여 사용 하였습니다.
의도 하는 바는
var items = ['a', 'b', 'c'];
3개 값을 foreach 형식의 로직으로 promise 를 순차적으로 실행 하는것입니다.
먼저 저는 vue js 프레임 워크를 사용기 때문에
methods 에 함수를 작성 하였습니다.
forEachPromise(items, fn){
return items.reduce(function (promise, item) {
return promise.then(function () {
return fn(item);
});
}, Promise.resolve());
}
일단 위와 같은 함수를 정의해 줍니다.
그다음에
logItem(item){
return new Promise((resolve, reject) => {
process.nextTick(() => {
console.log(item);
setTimeout(function(){ resolve() }, 3000);
})
});
}
반복문로직을 함수로 구현 해 줍니다.
저는 3000초 후에 item 을 console 로 찍고 resolve()를 해 주도록 했습니다.
실제 사용을 할때 에는
var items = ['a', 'b', 'c'];
this.forEachPromise(items, _this.logItem).then(() => {
console.log('done');
});
로 사용 했습니다.
그럼 전체가 끝날때 console.log('done') 이 실행 됩니다.
로직은
console에
a (3초뒤에 )
b (3초뒤에 )
c (3초뒤에 )
done
으로 실행 되게 됩니다.