03. async/await

async/await

async/await 문법은 ES8에 해당하는 문법으로서, Promise 를 더욱 쉽게 사용 할 수 있게 해줍니다.

기본적인 사용법을 알아봅시다.

const sleep = (ms) => {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function process() {
    console.log('안녕하세요!');
    await sleep(1000);
    console.log('반갑습니다.!');
}

process();

// 결과)
안녕하세요!
반갑습니다.!

async/await 문법을 사용할 때에는, 함수를 선언 할 때 함수의 앞부분에 async 키워드를 붙여주세요. 그리고 Promise 의 앞부분에 await 을 넣어주면 해당 프로미스가 끝날때까지 기다렸다가 다음 작업을 수행 할 수 있습니다.

위 코드에서는 sleep 이라는 함수를 만들어서 파라미터로 넣어준 시간 만큼 기다리는 Promise 를 만들고, 이를 process 함수에서 사용해주었습니다.

함수에서 async 를 사용하면, 해당 함수는 결과값으로 Promise 를 반환하게 됩니다. 따라서 다음과 같이 코드를 작성 할 수 있습니다.

const sleep = (ms) => {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function process() {
    console.log('안녕하세요!');
    await sleep(1000);
    console.log('반갑습니다.!');
}

process().then(() => {
    console.log('작업 끝났어요!')
});

// 결과)
안녕하세요!
반갑습니다.!
작업 끝났어요!

async 함수에서 에러를 발생 시킬때에는 throw 를 사용하고, 에러를 잡아낼 때에는 try/catch 문을 사용합니다.

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

async function errorMake() {
    await sleep(3000);
    const error = new Error();
    throw error;
};

async function process() {
  try {
    await errorMake();
  } catch (e) {
    console.log('then error : ', e)   // 여기서 e는 위에 throw error;를 가리키게 됩니다.!!
  }
}

process();

// 결과)
then error : error

EX1)

new Promise 로 정의 하는 코드

function a(value) {
    return new Promise((resolve, reject) => {
        setTimeout(function() { // 여기서 setTimeout 한것은 서버와의 통신에서 시간을 걸린다는 가정해서 이미를 setTimeout함수를 사용한것입니다.
            resolve(value)
        },1000)
    })
}

function b(value) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {  // 여기서 setTimeout 한것은 서버와의 통신에서 시간을 걸린다는 가정해서 이미를 setTimeout함수를 사용한것입니다.
            resolve(value)
        },1000)
    })
}

function c(value) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {  // 여기서 setTimeout 한것은 서버와의 통신에서 시간을 걸린다는 가정해서 이미를 setTimeout함수를 사용한것입니다.
            resolve(value)
        },1000)
    })
}

function d(value) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {  // 여기서 setTimeout 한것은 서버와의 통신에서 시간을 걸린다는 가정해서 이미를 setTimeout함수를 사용한것입니다.
            resolve(value)
        },1000)
    })
}

function test(value) {
    return new Promise((resolve, reject) => {
        if(false) { // 정상적으로 서버와 통신못하면 (에러 나면) 실행됩니다.
            reject('Error') //reject('원하는 메세지 작성')
        }
        setTimeout(() => {  // 여기서 setTimeout 한것은 서버와의 통신에서 시간을 걸린다는 가정해서 이미를 setTimeout함수를 사용한것입니다.
            resolve(value) 
        }, 1000);
    })
}

then catch 실행하는 코드

// then catch 실행하는 코드

test('A').then((res) => {console.log(res)})
.then(() => b("B").then((res) => {console.log(res)}))
.then(() => c("C").then((res) => {console.log(res)}))
.then(() => d("D").then((res) => {console.log(res)}))
.catch((error) => {
    console.log(error)
    alert(error)
})
.finally(() => {
    console.log('done!!')
    alert('done!!')
})

ES8버전 async await 실행하는 코드

// ES8버전 async await 실행하는 코드

async function asyncFunc() {
    try {
        const a0 = await test('A!')
        console.log(a0)
        const a1 = await a('A')
        console.log(a1)
        const b1 = await b('B')
        console.log(b1)
        const c1 = await c('C')
        console.log(c1)
        const d1 = await d('D')
        console.log(d1)
    } catch (error) {
        alert(error)
        console.log(error)
    } finally {
        console.log('done!!')
    }
}

asyncFunc()

840B

async.js.zip

archive

Open

async.js 예시