promise loop,foreach 동기화

promise loop foreach 동기화 

기존 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

으로 실행 되게 됩니다.