[JS] 비동기 처리란?( +Promise, async&await )

비동기

특정 코드의 연산이 끝날 때까지 코드의 실행이 멈추지 않고,

다음 코드를 먼저 실행하는 JS의 특성

 

Q. 비동기 객체를 사용하는 이유는?

A. 화면에서 서버로 데이터를 요청했을 때

서버가 언제 그 요청에 답을 줄지 모르는데 계속 기다릴 수는 없음!

 

예를 들어 50개의 요청을 보내는 경우 

동기 처리를 하게되면 코드를 "실행하고 기다리고" 과정이 반복되어

웹 애플리케이션 실행에 수십분이 걸리게 됨

 

Q. 동기와 비동기 특징은?

A. 동기 는 동시에 여러 작업을 수행할 수 없음!

그러나 흐름을 예측하기 쉽고, 먼저 수행되고 나중에 수행되는 것들이 명확함

비동기 는 동시에 여러 작업을 수행할 수 있음!

그러나 흐름을 예측하기 어려움, 즉 무엇이 먼저 완료될 지 보장할 수 없음

 

흔한 비동기 사례

1. 제이쿼리의 ajax

제이쿼리로 실제 웹 개발 시 ajax통신으로 데이터를 서버로부터 가져와

화면에 표시할 이미지, 데이터를 불러옴

 

2. setTimeout() 함수

web API의 한 종류

코드를 바로 실행하지 않고, 지정 시간만큼 기다렸다가 로직 실행시킴

☞ 뒤에 코드가 더 빨리 실행될 수도 있음

 

3. Promise 객체

비동기 작업을 생성/시작하는 부분과 작업 이후의 동작 지정 부분(then, catch)을 분리함으로써

보다 유연한 설계를 가능토록 함

but, 에러가 몇 번째 발생했는지 알아내기 어려움

또한 특정 값을 공유해가면서 작업을 처리하기도 까다로움

 then 지옥에 빠질 수 있음

 

++ 요약

Promise 를 만드는 순간 비동기 작업이 시작되며, 비동기 작업을 성공으로 간주하고 싶을 때 resolve를 호출하고,

실패라 간주하고 싶다면 reject 함수를 호출합니다.

이 비동기 작업이 성공했을 때 후속 조치를 지정하고 싶다면 then으로, 실패 시의 후속 조치는 catch 로 지정

 

4. async & await 문법

promise의 단점을 보완해주는 비동기 중 가장 최근 문법

* async : 함수를 선언할 때 붙여줌

* await : Promise가 fulfilled가 되든, rejected가 되든 끝날 때까지 기다리는 함수로 async 함수 내부에서만 사용가능

 

< 기본 문법 >
async function 함수명 ()  {
     await 비동기처리_메소드명();
}

 

먼저 함수의 앞에 async 라는 예약어를 붙임

그러고 나서 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙임

여기서 주의하셔야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작함

일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수

ex) 내가 한 프로젝트에서 callApi도 Axios로 프로미스를 반환하는 함수이므로

async&await 문법 사용하여 api호출 실행 가능