프로미스 Async/Await

기존 프로미스의 사용 방법을 개선하기 위해 ES8에서 소개된 비동기 처리 함수입니다.

Async 함수는 내부에서 프로미스를 사용해 비동기 요청 결과를 반환합니다.

프로미스와 다른 점은 일반 동기 함수를 작성하는 것처럼 코드가 구성되기 때문에 기존 코드와 이질감이 없어 가독성이 좋아집니다.

Async 함수는 Await 와 쌍을 이루어 사용합니다.

프로미스의 체인 방식 then() ~ catch() 를 대체하는 방식이므로 프로미스 객체를 생성하는 과정까지는 동일합니다.

프로미스 기초에서 구현했던 비동기 처리 함수를 Async/Await 로 재구성 해보겠습니다.

//프로미스 인스턴스 리턴function asyncWork(value){    return new Promise((resolve, reject)=>{        setTimeout(()=>{            value -= 20;            if(value > 50){                resolve(value);            }else{                reject(value);            }        },1000);    });}
//프로미스 요청/응답 체인let asyncFunc = async function(){    try{        let res = await asyncWork(100);        console.log('resolve1: '+res);        res = await asyncWork(res);        console.log('resolve2: '+res);        res = await asyncWork(res);        console.log('resolve3: '+res);    }catch(err){        console.log('catch: '+err);    }}asyncFunc();//비동기 요청 Async 함수 실행

비동기 처리를 위한 프로미스 객체를 생성하는 방법은 표준 프로미스 객체 선언과 동일합니다.

가장 중요한 부분은 Async 함수 선언과 함수 안의 Await 으로 프로미스 결과를 기다리는 부분입니다.

Async 함수를 실행하면 Async 함수 안에 선언된 프로미스가 실행되는데 await 가 붙어있는 프로미스는 이행 완료 상태가 될 때까지 대기를 합니다.

이행 완료가 되면 콘솔에 응답 내용을 출력하고 다음 프로미스 실행 행으로 이동합니다.

프로미스 비동기 코드에서 거부(reject)가 발생하면 try ~ catch 예외 처리에 따라 catch() 예외 처리가 되고 비동기 처리가 종료됩니다.

Async/Await 의 장점은 동기 함수가 순서대로 실행되는 것과 같은 형태임에도 비동기 처리를 순차적으로 한다는 점입니다.

기존 프로미스의 체인식 비동기 처리가 자바스크립트의 동기 함수/코드와 이질감이 있고, 콜백  함수를 일일이 작성해주어야 하는 불편함이 Async/Await 에는 더이상 없습니다.