시작
일단 나는 async함수 내에서 그냥 this.어쩌구함수() 를 실행했떠니
계속 순서대로 처리가 안되서 ;; 당황했다.
근데 알고보니까 async함수 내에서는 await을 사용해야 순서대로 처리가 된다는 것!
(그건 async 함수에서 await이 있을때와 없을때 차이를 보면된다)
그래서 async함수 내에서 await this.어쩌구함수() 이렇게 썻다
그랬더니 계속 void함수라고 하는것이다 ...
그래서 엄청 해멨다..
그랫더니 await은 promise형태로 return해주는게 필요하다는 것이다.
그래서
//배포, 해제 동작
handleDeployService = async(isDeploy) => {
let isDefaultAuthM = "";
if(activeService.service_name_kr === "A서비스"){
isDefaultAuthM = await this.getIsDefaultAuthM();
}
}
//A서비스 기본 권한 설정 조회
getIsDefaultAuthM (item) {
//cno만으로 기본권한 설정 중 default_user_auth 조회하자.
let apiUrl = API주소 + "/common/default/auth";
let defaultAuth = "-";
return new Promise((resolve, reject) => {
Ajax.get(apiUrl).then((response) => {
response = JSON.parse(response);
if (response.resultCode === 200) {
defaultAuth = response.resultData;
resolve(defaultAuth === 'M');
} else {
LUXDialog.alert(response.resultMsg, {type: 'warning'});
return false;
}
}, (error) => {
RequestUtil.handleCatchProc(error);
});
});
}이렇게 return new Promise를 써줬다. 그리고 promise객체 자체를 return하지 않고
response.resultData가 defaultAuth인데 그게 'M'인지 판별해서 return 하도록
resolve(defaultAuth === 'M')를 써줬음!
for문 내에서 async await 사용하기
async function exampleAsyncFunction() {
const myArray = [1, 2, 3, 4, 5];
for (const element of myArray) {
console.log(`Processing element: ${element}`);
await someAsyncFunction(element);
}
}
async function someAsyncFunction(value) {
return new Promise(resolve => {
setTimeout(() => {
console.log(`Processed element: ${value}`);
resolve();
}, 1000);
});
}
exampleAsyncFunction();JavaScript에서 for 문 내에서 await를 직접 사용할 수 없습니다. await는 비동기 함수 내에서만 동작하며, for 문은 동기적으로 실행되기 때문입니다. await는 Promise를 기다리는 데 사용되는 특별한 키워드로, 비동기 함수 내에서만 유효합니다.
비동기적인 반복 작업을 수행하려면 for...of 루프를 사용하고, 그 안에서 await를 사용하는 비동기 함수를 호출해야 합니다.
부모함수에 이미 async 선언이 되어있는데 자식함수에도 async 선언이 필요한가?
someAsyncFunction 함수가 await를 사용하는 비동기 함수로 정의되어 있기 때문에, 해당 함수의 선언 앞에 async 키워드가 필요합니다. async 키워드를 함수 앞에 붙이면 함수 내에서 await를 사용할 수 있습니다.
이것은 함수가 Promise를 반환하고 await를 통해 해당 Promise가 처리될 때까지 대기해야 하는 비동기 동작이 있는 경우에 필요한 것
async, await 사용 이유
JavaScript는 기본적으로 단일 스레드로 동작하는 언어입니다. 이것은 한 번에 하나의 작업만을 처리할 수 있다는 의미입니다. 그러나 JavaScript는 비동기 프로그래밍을 지원하며, 이를 통해 효율적으로 여러 작업을 동시에 다룰 수 있습니다. 이런 비동기 작업은 일반적으로 콜백 함수나 Promise를 통해 처리됩니다.
async/await는 비동기 코드를 작성하고 관리하는 데 도움을 주는 문법적인 편의 수단입니다. async 함수는 항상 Promise를 반환하며, await 키워드는 Promise가 완료될 때까지 함수의 실행을 중지시킵니다. 이를 통해 비동기 코드를 동기적으로 작성하는 것처럼 보이게 만들 수 있습니다.
async function exampleAsyncFunction() {
console.log('Start');
// 비동기 작업을 순차적으로 수행
await someAsyncFunction(1000);
console.log('After 1 second');
// 다음 비동기 작업
await someAsyncFunction(1000);
console.log('After another second');
console.log('End');
}
function someAsyncFunction(timeout) {
return new Promise(resolve => setTimeout(resolve, timeout));
}
// exampleAsyncFunction 호출
exampleAsyncFunction();
delay 함수는 주어진 시간(밀리초)만큼 대기하는 Promise를 반환합니다. exampleAsyncFunction에서 wait delay(1000);을 사용하면 1초 동안 대기하며, 그 이후의 코드가 실행됩니다. 이런 방식으로 async/await를 사용하면 비동기 코드를 작성하되, 코드를 순차적으로 작성하는 데 편의성을 제공합니다.
하지만, 주의해야 할 점은 async/await는 비동기 코드를 동기적으로 작성할 수 있도록 해주지만, 그 자체로 스레드를 늘리지 않습니다. 여전히 JavaScript는 단일 스레드에서 실행되며, 비동기 작업은 백그라운드에서 관리되고 호출 스택이 비워질 때 실행됩니다.
Promise란
Promise객체는 도중 결과값도 리턴해준다고 생각하면 된다.
그래서 Promise객체를 전달받고 싶을 때에는 완전히 완료된 Promise객체만 리턴받기 위해
await을 사용한다.
그래서 api를 호출할 때에는 async/await 을 적극 사용하기를 권장한다.
하지만 async/await을 사용하지 않는게 더 효율적일 때도 있다.
정리
- async는 비동기 처리 함수인데 await과 함께 사용한다.
await은 async함수 내부에서 순차적으로 함수가 실행될 수 있도록 도와주는 기능을 한다. - await을 사용할 때는 promise와 함께 사용한다.
- promise.then() 문법을 사용할 수도 있지만 이는 콜백 지옥에 빠지게 되므로,
더 가독성 좋은 코드를 작성할 수 있도록 도와주는 것이await이기도 하다.
왜냐하면 await을 사용하면 then문법을 사용하지 않아도 되므로.
참고
