자바스크립트에서 비동기로 프로세스를 처리하려면 아래와 같이 함수(function)에 async 키워드를 사용하면 됩니다.

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

async function getApple() {
    await delay(1000);
    return "apple";
}

async function getBanana() {
    await delay(500);
    return "banana";
}

async function getFruites() {
    let a = "async: ";
    a += getApple().then((n) => console.log(`sync: ${n}`)); 
    a += getBanana().then((n) => console.log(`sync: ${n}`));
    console.log(a);
}

getFruites();

 

실행하면 a 변수가 먼저 콘솔에 표시되고, banana 그리고, apple이 표시됩니다. 비동기로 처리되는걸 확인할 수 있습니다.

 

 

동기적으로 처리하려면 await 키워드를 async 함수 앞에 추가하면 됩니다.

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

async function getApple() {
    await delay(1000);
    return "apple";
}

async function getBanana() {
    await delay(500);
    return "banana";
}

async function getFruites() {
    let a = "async: ";
    a += await getApple().then((n) => console.log(`sync: ${n}`)); 
    a += await getBanana().then((n) => console.log(`sync: ${n}`));
    console.log(a);
}

getFruites();

 

코드를 실행하면 순서대로 콘솔이 찍히는걸 확인할 수 있습니다.

 

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0