JS비동기 처리 - async / await

📢동기 VS 비동기

동기 : 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행(ex.은행)
비동기 : 요청을 보낸 후 응답에 관계 없이 다음 동작을 실행(ex.카페)

JavaScript는 싱글스레드를 사용하는 동기적 언어이다.

그러나 비동기적 처리를 할 수 없는건 아니다. JS자체는 동기적이지만 브라우저의 구성 요소들이 비동기 특성을 제공하기 때문이다.

🎈JS에서 비동기처리란?

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 순차적으로 다음 코드를 먼저 실행하는 것 (ex Ajax, setTimeout)

비동기처리가 필요한 이유는 api통신을 하며 가장 많이 느꼈는데, 데이터를 아직 가지고 오지 않은 상태에서 출력을 하려고 하면 오류가 발생하기 때문이다.

예시)

function apiGetItem(itemNum: number) {
  const res = axiosInstance.post('', {
    method: 'get',
    params: {
      n: itemNum,
    }
  });
  return res.data.Item;
}

위와 같은 함수를 통해 특정값을 api 호출을 통해 가져왔을 올때 만약 데이터가 아직 res에 담기지 않았는데 출력해버린다면 오류가 발생한다.

이럴 때 JS에서는 async / await 비동기처리 패턴을 사용하여 오류를 해결할 수 있다.

🌠async / await

JS 최신 비동기 처리 패턴으로 사용법이 간단하고 이해하기도 쉽다.

function 키워드 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다.

• async가 붙은 함수는 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환한다.
• await 키워드를 만나면 프라미스가 처리(settled)될 때까지 기다린다.

예시)

async function apiGetItem(itemNum: number) {
  const res = await axiosInstance.post('', {
    method: 'get',
    params: {
      n: itemNum,
    }
  });
  return res.data.Item;
}

async 함수를 선언하고 res에 데이터를 담는 api 호출 코드에 await를 붙여주면 데이터가 오는 동안 기다렸다가(비동기처리) 데이터가 담기면 res를 리턴하게 된다.