js while문 내 비동기처리 방법

뿌이·2023년 6월 9일

react 15버전

목록 보기

15/17

나는 프로그레스 바를 만들어야했다.
설명을 돕자면

이런거를 만들어야했는데
setTimeOut을 걸어서 퍼센트만큼 계속해서 상태를 setState해주면서 그래도 0.5초간은 % 숫자를 사용자가 볼 수 있도록 해야했으므로 비동기 처리가 필수적이었다.

하지만 나는 API를 여러번 호출하기위해 while문을 사용하고 잇었다.

함수1 = () => {
  while(조건){
      여러번API호출하는함수();
    	let 퍼센트 = 퍼센트계산공식 웅앵웅;
      progressBar만드는함수(퍼센트);
  }
}

progressBar만드는함수 = (completed) => {
	 if (completed > 100) {
       		setTimeOut(()=>{
            this.fnSetProgressing(false);
            this.setState({ value: 0 });
            },500)
        } else {
          setTimeOut(()=>{
            this.setState({value: completed});
          },500)
        }
}

대충 이런식으로 호출하고있었는데
계속 내가 원하는 순서는
API호출-> 퍼센트 올라감 -> 다시 while문 돌면서 API호출 -> 퍼센트올라감
이 순서였는데

API호출->퍼센트 함수호출 해두고 -> API호출 -> 퍼센트 함수호출 해두고 -> 반복 하다가
갑자기 퍼센트업,,,,,,,, 이런식인것이다 ㅡㅡ
완전 비동기처리를 제대로 잘못하고잇어서 검색 빡세개 해보니

js에서 while문이란

안타깝게도 JavaScript의 while 루프는 await 키워드와 함께 사용할 수 없습니다. await는 비동기 함수 내에서만 사용 가능하며, while 루프는 동기적인 특성을 가지고 있습니다.

하지만, 비슷한 동작을 구현하기 위해 while 루프와 async/await를 함께 사용하는 방법을 제시해 드릴 수 있습니다. 아래의 예시 코드는 while 루프를 async 함수 내부에서 사용하여 비동기 작업을 처리하는 방법을 보여줍니다.

//시간 지연 함수
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runAsyncTask() {
  let condition = true;

  while (condition) {
    await delay(1000); // 1초 대기

    // 조건 확인
    // condition 값을 변경하여 반복 여부를 결정
    if (/* 조건을 만족하면 */) {
      condition = false;
    }
  }
}

runAsyncTask();

이렇게 사용하라고 해서
나의 코드에 delay함수 만들고
함수를 async/await방식으로 변경하고
맨 마지막에 delay함수를 호출하도록 변경하니 예쁘게 잘 된다.

잘 돌아가는 코드예시

async 함수1 = () => {
  while(조건){
      여러번API호출하는함수();
    	let 퍼센트 = 퍼센트계산공식 웅앵웅;
      progressBar만드는함수(퍼센트);
    await delay(500);
  }
}

progressBar만드는함수 = (completed) => {
	 if (completed > 100) {
            this.fnSetProgressing(false);
            this.setState({ value: 0 });
        } else {
            this.setState({value: completed});
        }
}

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}