promise, async, await, axios - 비동기 통신에 대하여... (feat. axios 다른 모듈로 분리하여 사용하기)

요즘 REST API 가 굉장히 유행하고 있다.

서버와 클라이언트를 완전히 분리하고, 서버 주소로만 통신하니 역할분리가 확실하게 되더라.

이때 사용하는게 비동기 통신 라이브러리 axios 이다.

axios를 사용하면서 비동기 처리에 대해 공부하게 되었는데, 이해한 내용들을 간단하게 정리해보았다.

 

비동기란?

비동기, 동기는 원래 통신과 관련된 용어다. 물론 통신에서의 개념을 끌고 오지는 않고... 아주 간략하게 설명하자면,

동기란 이전 작업이 끝나야 다음 작업이 실행되는 것, 순차적으로 실행되는 것이고

비동기는 이전 작업 수행 중에도 다른 작업을 수행 할 수 있게 하는 것, 작업이 순차적으로 실행되지 않는 것이다.

 

예시를 들자면, 

a 작업 -> 서버 통신 -> b 작업 -> c작업이 있을 때

서버 통신을 동기적으로 수행한다면 a작업 종료 후 서버 통신, 서버통신 종료 후 b작업, b작업 종료 후 c작업을 한다.

서버통신을 비동기적으로 수행한다면 a작업 종료 후 서버 통신, 서버 통신 중에 b 작업을 하며 서버 통신 종료 타이밍은 b작업이 끝나기 전일지 끝난 후일지를 보장할 수 없다. b작업이 종료되면 c작업을 한다.

 

js에서 동기, 비동기 작업의 대표적인 예시는 다음과 같다.

동기 작업은 일반적으로 우리가 적는 코드이다. 이 코드들은 순차적으로 실행된다.

 

비동기 작업은 setTimeout, setInterval, EventLietner 등이 있다.

특정 시간이 지난 후 특정 코드가 실행되며, 이 시간동안 다른 작업도 실행된다.

또 다른 작업이 실행되는 동안 특정 이벤트가 들어올 때까지 기다린다.

 

비동기 작업의 결과는 어떻게 처리할까?

동기 작업은 직관적이다. 이전 실행의 결과가 나오면, 그 다음 실행을 하기 때문에 어떤 작업의 순서를 정하고 싶다면 순차적으로 코드를 적기만 하면 된다.

비동기 작업은... 비동기 작업이 끝나지 않았음에도 그 다음 작업이 시작된다.

만약 비동기 작업의 결과를 그 다음 작업에 이용하고 싶다면 어떻게 해야할까?

답은 간단하다. 비동기 작업과 그 이후 작업을 마치 동기 작업처럼 동작하도록 만들어줘야 한다.

 

여기서 다룰 promise, async, await 키워드들은 비동기 작업을 마치 동기적으로, 즉 비동기 작업이 끝난 후 특정 작업들을 실행할 수 있도록 순서를 정해주는 것들이다.

 

 

여기서 promise, async, await 를 깊게 다루지는 않는다.

 

비동기 작업이 언제 끝나는지 알려주는 Promise 객체

Promise 는 객체는 비동기 작업이 끝난 후 결과를 알려주는 용도로 사용한다.

말 그대로... '비동기 작업 끝나면 알려주겠다고 약속할게~' 라는 의미다.

Promise 를 사용하면 비동기 작업이 끝난 시점을 알 수 있어 동기작업처럼 구성할 수 있게 된다.

 

Promise 객체는 대기, 이행, 거부 이 세 가지 상태를 가진다.

각각 작업 완료 전, 작업 완료 후, 에러 발생하여 실패 라는 뜻이다.

 

사용하는 방법은 간단하다. 비동기 작업이 작업 종료 후 Promise 객체를 반환하도록 하고,

Promise 객체가 제공하는 then, catch 를 이용하면 된다.

 

여기서는 promise 객체를 어떻게 만들고, 관련된 다양한 함수를 보여주고... 하는 내용은 빼놓고 (axios 를 위한 글이니까 ㅎㅎ)

단순히 이 상태를 어떻게 처리하는 지는 예시를 보여주겠다.

const promise = //Promise 를 반환하는 어떤 비동기 작업..

promise.then((result) => console.log('성공!!').catch((error) => console.log('실패..')

promise 객체에 .then() 을 붙이면 이행 상태의 처리를 할 수 있고

.catch 를 붙이면 실패 상태를 처리할 수 있다.

 

참 쉽죠?

 

참고로, 대부분의 비동기 작업들은 Promise 객체를 반환한다.

 

async, await

Promise 객체를 사용하더라도 .then() .catch() 등등 뒤에 붙이는 것들이 많아진다. 

뒤에 뭐 안 붙이고, 더 간단하게 비동기 작업을 동기적으로 만들어주는 키워드가 바로 await 이다.

 

얘는 사용법이 더 간단하다.

비동기 작업 앞에 await 키워드를 붙이면, 비동기 작업이 결과를 낼 때까지 기다린다.

말 그대로 기다린다는 의미를 가졌다 ㅎㅎ

 

여기서 기다린다는 의미는, 모든 작업이 종료된다는 의미가 아니라... 내가 사용할 결과값이 나올 때까지 기다린다는 의미다.

메인 작업들은 멈추지 않고 await을 포함하고 있는 함수만 일시정지된다.

 

await 는 혼자만 쓸 수 없다.

await 와 세트로 쓰는 것이 있는데.. 바로  async 키워드다.

 

async 는 특정 함수를 비동기로 만드는 키워드다. await 와 세트로 쓰는 이유는, 내가 이해하기에 

1. 비동기 작업을 포함하고 있기 때문에 그 함수도 비동기여야 한다.
2. await 으로 그 함수만 일시정지하므로, 결국 이것도 비동기다.

이런 이유 때문이 아닐까 한다.

 

그리고 async 를 붙이면 그 함수는 Promise 객체를 반환한다. 비동기 작업이 되니까!

 

아무튼 요약하자면, 동기적으로 처리할 일이 있는 비동기 작업에 await 를 붙이고, 해당 작업을 포함하고 있는 함수에 async 를 붙이면 된다.

 

 

비동기 통신 라이브러리

axios 는 이 Promise 기반, 즉 비동기 기반으로 서버와 통신할 수 있는 라이브러리다.

async-await-promise-axios 를 세트로 쓰는 경우가 많은데,

서버와 통신하는 이유는 데이터를 받아오고, 조작하기 위해서이고

이 작업들은 보통 동기적으로 수행할 일이 많기 때문이다.

 

로그인으로 예시를 들자면,

먼저 사용자의 화면이 멈추지 않고 서버에 로그인 요청을 보내야 한다. 이런 경우 비동기 통신을 써야 한다.

화면에 로딩바를 그리고, 그러는 동안 서버에 로그인 요청을 보내야 하니까..

만약 동기적으로 수행한다면 화면이 멈추고 서버에 로그인 요청이 간다.

 

또 서버에 로그인을 보냈을 때 완료되었다는 결과값을 받고 나서 로그인 완료가 되어야 한다.

즉, 결과받음 -> 로그인 완료 는 동기적으로 수행되어야 한다.

이때 비동기 작업을 동기적으로 수행할 수 있도록 async, await 을 쓴다.

 

아주아주아주 간단한 예시 코드를 가져왔다.

const getData = async() => {
	const {data:result} = await axios.get("server adress");
    return result;
}

화살표 함수 앞에 async 를 붙여 비동기 선언을 한다.
axios 는 서버와 비동기로 통신하는 통신 라이브러리다. axios.get 은 인자로 적은 서버에서 get 요청을 보낸다.
이 비동기 통신을 동기적으로 수행하고 싶으니 앞에 await 를 붙인다.
get 요청의 결과는 헤더와 데이터들로 구성되어 있으므로, 우리가 필요한 데이터만 뽑아내기 위해 구조분해할당으로 result 변수에 담는다.

 

만약 이것을 그냥 비동기 통신으로 수행한다면, result 에 아무런 값이 없는 상태에서 무언가가 처리된다.

그러나 비동기 통신을 동기적으로 수행하고자 await을 붙였으니, 서버에 데이터를 받아오는 동안에는 작업이 일시중지된다.

그리고 서버에 결과를 받아오고 나서야 Result 에 값이 들어간다.

 

위에서 만든 getData 를 다른 곳에서 사용하고 싶다면?

잘 보면... getData 도 비동기 함수다. 왜냐면 async 로 선언되었으니까.

그러니 똑같이 await 으로 처리해주면 된다.

const getData = async() => {
	const {data:result} = await axios.get("server adress");
	return result;
}

...


<div onClick = {async() => console.log(await getData());}> </div>

 

 

---

 

 

알면 쉽고 모르면 어려운 비동기 통신...

물론 promise, axios 를 활용하는 방법은 무궁무진하다.

하지만 이 글에서 다루는 범위를 벗어나니...다음에 쓸 일이 생기면 적어봐야겠다.