[Axios] Async, Await?

🧶 동기(Sync), 비동기(Async)란?

비동기, 동기는 통신과 관련된 용어이다.

---

✅ 동기(synchronous = 동시에 일어나는)

: 이전 작업이 끝나야 다음 작업이 실행된다.
요청과 그 결과가 동시에 일어난다는 약속이며, 요청을 하면 시간이 얼마나 걸리든지 요청한 자리에서 결과가 주어져야 한다.

설계가 매우 간단하고 직관적이지만,
결과가 주어질 때 까지 아무것도 하지 못하고 대기해야한다.

---

✅ 비동기(Asynchronous = 동시에 일어나지 않는)

: 이전 작업 수행 중에도 다른 작업을 수행할 수 있게 하는 것 (작업이 순차적으로 실행되지 않는다)
요청한 결과가 동시에 일어나지 않을거라는 약속이다.

동기 방식보다 복잡하지만,
결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있기 때문에 자원을 효율적으로 사용할 수 있다.

---

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

1. 동기 작업은 직관적이다.

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

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

✨ Q. 만약 비동기 작업의 결과를 그 다음 작업에 사용하고 싶다면? ✨
A. 비동기 작업과 그 이후 작업을 마치 동기 작업처럼 동작하도록 만들어줘야 한다.

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

---

1) promise

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

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

대기 , 이행, 거부 총 3개의 상태를 갖는다.
각각 작업 완료 전, 작업 완료 후, 에러 발생하여 실패 라는 뜻이다.

🔸 promise 사용 방법

비동기 작업이 작업 종료 후, promise 객체를 반환하도록 하고
promise 객체가 제공하는 then, catch를 이용하면 된다.

const promise = // promise를 반환하는 어떤 비동기 작업...
      
promise.then((result) => console.log('성공!').catch((error) => console.log('실패..')

• promise 객체에 .then을 붙이면 이행 상태의 처리를 할 수 있다.
• .catch를 붙이면 실패 상태를 처리할 수 있다.

---

2) await

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

이러한 키워드를 붙이지 않고, 더욱 간단하게 비동기 작업을 동기적으로 만들어주는 키워드가 await 이다.

🔹 await 사용 방법

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

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

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

await는 혼자 쓸 수 없다 = async 키워드와 함께 사용한다.

---

3) async

async는 특정 함수를 비동기로 만드는 키워드이다.

await와 세트로 사용하는 이유는,

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

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

---

출처 : https://anywaydevlog.tistory.com/30