[Javascript] 비동기 통신관련 주요 키워드. async,await,try,catch

비동기 함수( Asynchronous Function )?

비동기 함수는 작업을 동기적으로 기다리지 않고, 다른 작업을 동시에 수행할 수 있도록 해주는 함수이다.

즉, 비동기 함수는 어떠한 작업을 시작한 이후 그 작업이 완료 될 때 까지 기다리는 것이 아니라 다른 작업을 실행 할 수 있도록 도와준다. 

 

비동기 함수는 서버측에 요청,  로딩, 타이머, 이벤트 처리 등과 같은 시간이 걸리는 작업을 처리하는데 있어 유용하며, App의 반응성을 향상 시킬 수 있다.

 

비동기 통신을 위한 주요 키워드

1. async

함수 앞에 'async' 키워드를 붙이면 async 키워드가 붙은 함수는 비동기 함수로 표시된다.

아래 3번 항목에서 나올 await 을 사용 할 수 있게 해주는 비동기 통신 수행을 위해 가장 먼저 첫번째로 선언되는 키워드이며, "이 함수는 비동기 작업으로 수행 할 것이다." 라는 것을 나타낸다.

async function fetchData() {///코드}

 

2. try & catch

 

try & catch 키워드는 에러 처리를 위한 키워드이며 각 키워드 선언후 중괄호 블록을 작성한다.

비동기 통신 작업중 통신간 예외(에러)의 상황이 발생하면 이를 'try'키워드가 캐치해낸다. try키워는 예외(에러)의 상황이 발생하더라도 코드가 거기서 멈추지않고, 계속 실행 될 수 있게 진행시켜주는 키워드이다.

 

그리고 그 예외(에러)의 상황을 처리해주는 키워드가 'catch' 이다.

예외(에러) 상황을 표시 할 수 있는 처리를 이 키워드의 블록안에서 실행하며, catch키워드에는 뒤에 매개변수'()'가 붙는데, '에러 핸들러 매개변수'라고도 표현하는 모양이다. 

*) 통상적으로 catch의 매개변수는 에러를 나타내는 'err, error' 식의 매개변수가 많이 들어간다.

try {
	///비동기 통신하는 코드
    ///이 블록안에서 예외(에러)의 상황이 발생 할 수 있다.
} catch(error) {
	//예외(에러)의 상황을처리하는 코드
    //매개변수로 들어간 error에 예외(에러)에 대한 정보가 들어있다.
}

 

 

3. await

 

await키워드는 앞에 async키워드가 붙은 비동기 함수 내에서 다른 비동기 작업을 기다릴 때 사용한다.

 

간단하게 설명하면 자바스크립트는 성격이 급해서 코드의 동작이 끝나지 않았음에도 곧바로 다음줄의 코드를 실행한다.

하지만, 서버와 통신하여 데이터를 가져오는건 꽤 시간이 소요되고 이를 자바스크립트로 통신하면 자바스크립트는 통신이 끝날때까지 가만히 기다려주지않고 그 다음 코드를 실행시켜버린다. 그렇게 되면 비동기 통신이 안끝난 상태에서 이를 컨트롤 하는 코드가 작성되어있을 경우 오류를 뱉어낸다.

 

awiat키워드는 위와 같은 상황을 막아주는 키워드다. 비동기 작업이 완료될때까지 다음 코드를 실행시키지않고 비동기 작업이 완료될 때 까지 기다리게하며, 그 결과를 반환한 이후 다음 코드를 실행 할 수 있게 만들어준다.

 

 

 

이전에 포스트한 axios 라이브러리를 보통 위에 설명한 키워드들과 함께사용하며,

작성방식은 아래와 같다.

async fetchData() {
    try {
        const responce = await axios.get('통신할 url~');
        console.log(responce data);
    } catch(err) {
       console.log(err);
    }
}