자바스크립트(JavaScript) 비동기 동기화처리, 반복문 동기화처리(순서대로), for문 while문 동기화, asysnc awiat 사용방법 [초간단]

 

//for문 동기화 처리
const promise = msec => new Promise((resolve) => setTimeout(resolve, msec))

async function asyncFor () {
    for (var i = 1; i < 4; i++) {
        console.log(i);
        await promise(1000);
    }
    console.log('for_Finished');
}

asyncFor();

 

// while문 동기화 처리
const promise = msec => new Promise((resolve) => setTimeout(resolve, msec))

async function asyncWhile () {
    let i = 3;
    while(i > 0) {
        console.log(i);
        await promise(1000);  
        i--;
    }
    console.log('while_Finished')
}

asyncWhile();

 

//async await Sample
function asyncFunc(){
    return new Promise((resolve,reject)=>{
       console.log("asyncFunc_Start")
        setTimeout(function(){
            console.log("asyncFunc_Finished");
            resolve();
        } , 2000);
    });
}
async function asyncAwiatFunc(){
    console.log("1");
    await asyncFunc();
    console.log("2");
}

asyncAwiatFunc();

---

async와 await [펌]

async와 await라는 특별한 문법을 사용하면 프라미스를 좀 더 편하게 사용할 수 있습니다. async, await는 놀라울 정도로 이해하기 쉽고 사용법도 어렵지 않습니다.

async 함수

async 키워드부터 알아봅시다. async는 function 앞에 위치합니다.

async function f() {
  return 1;
}

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다.

아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환됩니다. 직접 확인해 봅시다.

 

 

async function f() {
  return 1;
}

f().then(alert); // 1

명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일합니다.

 

 

async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1

async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환합니다. 굉장히 간단하죠? 그런데 async가 제공하는 기능은 이뿐만이 아닙니다. 또 다른 키워드 await는 async 함수 안에서만 동작합니다. await는 아주 멋진 녀석이죠.

await

await 문법은 다음과 같습니다.

// await는 async 함수 안에서만 동작합니다.
let value = await promise;

자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다립니다(await는 '기다리다’라는 뜻을 가진 영단어입니다 – 옮긴이). 결과는 그 이후 반환됩니다.

1초 후 이행되는 프라미스를 예시로 사용하여 await가 어떻게 동작하는지 살펴봅시다.

 

 

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

함수를 호출하고, 함수 본문이 실행되는 도중에 (*)로 표시한 줄에서 실행이 잠시 '중단’되었다가 프라미스가 처리되면 실행이 재개됩니다. 이때 프라미스 객체의 result 값이 변수 result에 할당됩니다. 따라서 위 예시를 실행하면 1초 뒤에 '완료!'가 출력됩니다.

await는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 만듭니다. 프라미스가 처리되면 그 결과와 함께 실행이 재개되죠. 프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않습니다.

await는 promise.then보다 좀 더 세련되게 프라미스의 result 값을 얻을 수 있도록 해주는 문법입니다. promise.then보다 가독성 좋고 쓰기도 쉽습니다.

일반 함수엔 await을 사용할 수 없습니다.

async 함수가 아닌데 await을 사용하면 문법 에러가 발생합니다.

 

 

function f() {
  let promise = Promise.resolve(1);
  let result = await promise; // Syntax error
}

function 앞에 async를 붙이지 않으면 이런 에러가 발생할 수 있습니다. 앞서 설명해 드린 바와 같이 await는 async 함수 안에서만 동작합니다.

 

출처:https://ko.javascript.info/async-await

async와 await