자바스크립트 Async & Await (비동기 프로그래밍 문법)

안녕하세요 자바스크립트 내용 마지막인  Async & Await 에 대해 알아보겠습니다. 
우선 async & await에 대한 개념부터 알아보겠습니다.
async & await 란? -> 자바스크립트의 비동기 처리 패턴 중 최신의 패턴으로, 프로미스가 비동기 처리를 좀 더 편리하게 해주었다면, async/await는 프로미스를 더욱 쉽게 사용할 수 있게 해줍니다.
모든 설명과 소스 해석은 주석으로 처리하였습니다.

/**
 * Async & Await (비동기 프로그래밍 문법)
 * async 함수는 함수 앞에다가 작성하면 함수 안에 await를 실행할 수 있다.
 * await를 쓰면 다음 코드가 await를 한 함수가 끝날 때까지 실행되지는 않지만, 쓰레드를 막고 있지는 않다.
 * 따라서 선언한 함수 외에 다른 함수가 실행될 것이 있다면 그 함수는 실행이 될 수가 있다.
 * await는 promise에만 사용 할 수가 있다.(promise로 만드는 함수만 가능)
 * 
 */

reject 매개변수를 사용한 소스코드

const getPromise = (seconds) => new Promise((resolve, reject) => {
    setTimeout(() => { // 입력한 숫자만큼 기다리는 함수
        reject('에러')
    }, seconds * 1000);
});

async function Winner(){  // try catch 문으로 에러를 잡는다.
    try{
    const result1 = await getPromise(3); // getPromise를 실행하여 3초를 기다리는 함수를 실행 할때
    console.log(result1); // 3초뒤 'Pass'가 출력된다.
    const result2 = await getPromise(2);
    console.log(result2);
    const result3 = await getPromise(1);
    console.log(result3);
    }catch(e){
     console.log('----- catch e------')
     console.log(e); // result1, result2, result3 전부 출력이 안됨
    } finally{
        console.log('----- finally------')
    }

}

Winner();

 

resolve 매개변수 사용한 소스코드

const getPromise = (seconds) => new Promise((resolve, reject) => {
    setTimeout(() => { // 입력한 숫자만큼 기다리는 함수
        resolve('에러')
    }, seconds * 1000);
});

async function Winner(){  // try catch 문으로 에러를 잡는다.
    try{
    const result1 = await getPromise(3); // getPromise를 실행하여 3초를 기다리는 함수를 실행 할때
    console.log(result1); // 3초뒤 'Pass'가 출력된다.
    const result2 = await getPromise(2);
    console.log(result2);
    const result3 = await getPromise(1);
    console.log(result3);
    }catch(e){
     console.log('----- catch e------')
     console.log(e); // result1, result2, result3 전부 출력이 안됨
    } finally{
        console.log('----- finally------')
    }

}

Winner();

 

try catch 문을 사용하기전  실행한 코드

const getPromise = (seconds) => new Promise((resolve, reject) => {
    setTimeout(() => { // 입력한 숫자만큼 기다리는 함수
        resolve('Pass')
    }, seconds * 1000);
});

async function Winner(){ 
  const result1 = await getPromise(3); // getPromise를 실행하여 3초를 기다리는 함수를 실행 할때
  console.log(result1); // 3초뒤 'Pass'가 출력된다.
  const result2 = await getPromise(2);
  console.log(result2);
  const result3 = await getPromise(1);
  console.log(result3);
}

Winner();
console.log('종료합니다'); // '종료합니다' 먼저 출력된다. 이유 -> await를 했을 때 쓰레드(thread)가 막히지 않는다는 뜻이랑 같다.