async/await 반복문에서 사용하기

axios는 기본적으로 비동기이기 때문에, 순서대로 실행되지 않는다. 처음 착각한 부분은 요청하고 바로 데이터를 받아와서 then 구문이 실행한다고 생각한 부분이다.

 

아래 코드는 forEach로 반복을 하고 있는데 나는 요청/응답-요청/응답-요청/응답 이렇게 실행 되는 줄 알았는데,

아래 코드는 요청-요청-요청-응답-응답-응답 이런식으로 실행돼었다. 

 

그래서 원하는 데이터를 가지고 로직을 수행 할 수 없었다.

 

❎ 기존 코드

function contentsList(intentList) {
    _.forEach(intentList, (intent)=> {
        let intentId = intent.intentId;
        if(!contentSet.has(intentId)) {
            axios.get(url, {params : {intentId}})
                .then((res)=> {
                        if(Object.keys(res.data).length > 0) {
                            let seq = res.data.contentsSeqNo?.toString();
                            let list =
                                `<li class="guide-link">
                            <a href="#" data-seq = ${seq} data-keyword=${res.data.keywordList} onclick="controllContentsDisplay();clickedContent(this);realtimeContentsModel.readContents('${intentId}');">${res.data.title}</a>
                         </li>`;
                            document.getElementById('guideList').insertAdjacentHTML("afterbegin", list);
                            contentSet.add(intentId);
                            contentsObj[seq] = res.data;
                        }
                })
            }
          })
}

 

❎ 변경 코드

문제를 찾고 나니 처음 든 생각은 async와 await을 사용하자! 였다. 그래서 아래와 같이 코드를 변경해주었다.

function contentsList(intentList) {
    _.forEach(intentList, async (intent)=> {
        let intentId = intent.intentId;
        if(!contentSet.has(intentId)) {
            const response = await axios.get(url, {params : {intentId}})
                
                response.then((res)=> {
                     if(Object.keys(res.data).length > 0) {
                          let seq = res.data.contentsSeqNo?.toString();
                          let list =
                              `<li class="guide-link">
                          	<a href="#" data-seq = ${seq} data-keyword=${res.data.keywordList} onclick="controllContentsDisplay();clickedContent(this);realtimeContentsModel.readContents('${intentId}');">${res.data.title}</a>
                       		</li>`;
                          document.getElementById('guideList').insertAdjacentHTML("afterbegin", list);
                          contentSet.add(intentId);
                          contentsObj[seq] = res.data;
                      }
              })
          }
        })
}

 

✅ 최종 코드

그렇다고 내가 원하는대로 순서대로 실행되었을까? 대답은 NO!

이유는 forEach는 비동기 실행이기 때문!

 

이 때 reduce 함수를 사용 할 수 있다. 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Array.prototype.reduce() - JavaScript | MDN

function ContentsList(intentList) {
    intentList.reduce((prev, current) => {
        prev.then(async ()=> {
            let intentId = current.intentId;
            if(!contentSet.has(intentId)) {
                contentSet.add(current.intentId);
                const response = await axios.get(url, {params : {intentId}})
                if(Object.keys(response.data).length > 0) {
                    let seq = response.data.contentsSeqNo?.toString();
                    let list =
                        `<li class="guide-link">
                            <a href="#" data-seq = ${seq} data-keyword=${response.data.keywordList} onclick="controllContentsDisplay();clickedContent(this);realtimeContentsModel.readContents('${intentId}');">${response.data.title}</a>
                         </li>`;
                    document.getElementById('botGuideList').insertAdjacentHTML("afterbegin", list);
                    contentSet.add(intentId);
                    contentsObj[seq] = response.data;
                }
            }
        })
   		return Promise.resolve(current)
   }, Promise.resolve())
}