async await 비동기 코드 작성하기

 async / await를 사용하면 읽기 쉽고 유지보수가 편리한 비동기 코드를 간단하게 작성할 수 있다. await는 async function 안에서만 사용할 수 있다. async await는 프로미스를 기반으로 동작하며 프로미스를 반환하므로 then을 통해 값을 활용해야 한다. 

 

1) async await 사용법

 ECMAScript 2017에서 도입된 async await는 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 쉽도록 만들어준다.

• 비동기 함수를 async 함수로 만들기 위하여 function()앞에 async 키워드를 추가한다. 
• async를 함수와 같이 사용하면 결과(값)를 직접 반환하는 게 아니라 프로미스를 반환한다.
• await 키워드는 프로미스가 settled 상태(비동기 처리가 수행된 상태)가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolved한 처리 결과를 반환한다.

2) async await 비동기 코드 예시

 아래는 일반적인 함수를 사용한 결과부터 async 함수를 사용해서 제대로 값을 받는 상황까지 담은 예시이다. 결과를 누르면 각 함수의 결과(값)이 출력되고 리셋을 누르면 초기화되도록 코드를 구현해놓았다.

 

 

 

 

 

 

3) then 통해 프로미스를 값으로 변환

 위 예시 코드에서 중요한 포인트는 3번의 then 사용이 들어간 프로미스 처리 부분이다. 각 예시 코드를 간단히만 정리하면 다음과 같다. 

1) 일반적인 함수 작성 시 값을 반환
     function hello() {return "Hello"};
     ex.textContent = `일반적인 함수 작성 시 값이 반환됨: ${hello()}`;
2) async 함수 작성 시 프로미스 반환
     let hello2 = async function() { return "Hello" };
     ex2.textContent = `async 함수 작성 시 프로미스가 반환됨: ${hello2()}`;
3) 프로미스를 값으로 변환하려면 then 활용
     let hello3 = async function() {
               return "object Promise를 출력하려면 then 안에 함수 값으로 넣어줌"
            };
     hello3().then( (value) => {
          ex3.textContent = `object Promise를 출력하려면 then 안에 함수 값으로 넣어줌 : ${value}`
            });
4) 화살표 함수도 3과 동일하게 작동한다.
    let hello4 = async () => { return "Hello" };
hello4().then( value => {
           ex4.textContent = `화살표 함수도 값을 출력하려면 then 안에 함수 값으로 넣어줌: ${value}`
        });

 

자바스크립트 에러 처리 - try catch finally