[JS] 반복문에 promise

1. promise

 

promise는 비동기적 실행을 동기적으로 실행하기 위해 사용한다고 생각합니다.

정확히는 비동기적 실행에 대한 결과 값에 대한 완료 또는 실패에 의한 결과 값입니다.

(기본적인 내용은 유튜브 엘리님 설명이 좋습니다.)

 

양치를 하는 행위는 비동기와 비슷하다고 생각합니다. 그래서 양치를 하면서 책을 읽을 수 있고, 폰을 볼 수도 있습니다. 하지만 양치를 하면서 치아의 상태를 제대로 확인 할 수는 없습니다. 거품 때문에 양치를 마치고 난 뒤에야 치아 확인을 제대로 할 수 있죠.

양치라는 행위를 완료하고 치아를 확인하게 만들어 주는 것이 promise라고 생각합니다.

 

2. 반복문에서 비동기 처리를 동기적으로 처리

  promise를 반복문에 사용하려 했는데, 블로그에 많은 글들이 있었지만 오히려 햇갈렸기 때문에 제 경험에 빗대어 짧게 썼습니다.

 

1. promise.all, map을 사용하는 방법 2. for...of (for)방법이 있습니다.

promise.all은 병렬처리, for은 순차처리 방식이라고 합니다.

그렇기 때문에 promise.all을 사용하는것이 아무래도 병렬식으로 처리 속도가 좋기 때문에 대부분 많이 사용합니다.

(하지만 제가 잘못 실행시켰는지 직접 실행해 볼 때는 차이를 느끼지 못하였습니다.)

 

foreach는 사용하지 않고 예외인 것이, 배열 요소를 단순히 순차적으로 돌면서 callback을 실행하기 때문에 배열의 코드가 비동기여도 넘어 갑니다.

 

 

아래 코드는

findLostData 함수에서 배열을 처리 하는데 Promise.all 과 map을 이용해서 비동기 기능이 있는 함수(checkWeatherData)를 병렬처리 하였고,

checkWeatherData 함수에서는 비동기 함수를 수행하고 count 값이 들어오면 다음 함수가 실행 되게 then을 사용했습니다.

    async function checkWeatherData(nx, ny, cityId) {
      let count = new Promise((resolve, reject) => {
        resolve(countWeatherData(nx, ny, cityId));
      });

      count.then((value) => {
        console.log("countdata=>>>>>", value);
        countCheckWeatherData(value, nx, ny, cityId);
      });
    }

    async function findLostData(areaArray, cityId) {
      await Promise.all(
        areaArray.map(async (area) => {
          const nx = area[0];
          const ny = area[1];
          checkWeatherData(nx, ny, cityId);
        }),
      );
    }

 

제가 혼란스러웠던 부분은 promise all 과 map을 사용하면 안에 있는 함수(checkWeatherData)에 있는

count의 변수 값이 비동기로 받아지는데 이것도 처리가 되면서 기다려 받는 줄 알고 햇갈렸습니다.

(아래 사진은 new promise ~ then을 사용하지 않았을 때)

• 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

new promise를 쓰기 전

promise.all 과 map은 배열 요소를 처리하는 방식인 것이지, 배열 안에 있는 각각의 비동기적 기능을 기다려 주는 방법은 아니었습니다.

배열 요소에 있는 (비동기 + 동기) 기능을 순차적으로 해주진 않습니다.

 

그러므로 promise.all 과 map을 써주는 동시에

배열 요소 안에 비동기 기능이 실행 된 후 그 다음 실행이 되어야 한다면, new promise ~ then 을 실행 시켜 주어야 합니다.