35. Vue - 비동기 처리(callback, promise, async, await)

- 본 포스팅의 내용은 자바스크립트의 비동기 처리에 대해 간략하게 정리해 놓은 것이다.

- 비동기식 처리에 대해서 배우고 싶다면 다음 포스팅을 참고하기를 권장한다. 

 

https://devraphy.tistory.com/115 

JS 근본 공부 - 콜백(Callback)

 

https://devraphy.tistory.com/116 

JS 근본 공부 - Promise

 

https://devraphy.tistory.com/117 

JS 근본 공부 - async & await

---

1. 동기식 vs 비동기식 

a) 동기식 처리란?

- 코드가 작성된 순서대로 실행되는 것

 

b) 비동기식 처리란?

- 코드가 작성된 순서와는 상관없이 지정된 순서에 의해 실행되는 것 

---

2. 대표적인 비동기식 처리방법 

a) callback

- 재귀함수와 같은 형태로, 하나의 함수 안에서 다른 함수를 호출하는 방식으로 실행 순서를 부여한다. 

- 호출하는 함수가 많아질수록 코드의 의존성이 올라가며, 가독성과 효율성이 떨어진다.

- 그러므로 하나의 함수가 수정되면 전체 코드에 영향을 미치게 되어 유지보수가 힘들다. 

 

b) promise

- promise 객체를 사용하여 비동기를 구현하는 방법이다. 

---

3. Promise

a) 기본개념

- promise 객체와 resolve를 할당받은 메소드만이 async와 await 키워드를 사용할 수 있다.

- promise 객체를 부여받은 메소드는 내부에는 resolve() 메소드를 부여한다.

- await 키워드를 할당받은 메소드는 promise 내부에서 resolve()가 실행될 때까지 우선적으로 실행된다. 

- resolve()가 실행되기 전까지 다른 메소드는 실행될 수 없다.

- 얼음땡 놀이로 비교하자면 땡!이 resolve()의 역할이다.

 

b) promise의 동작상태 

- pending(대기): promise의 초기상태 

- fulfilled(이행): promise 내부 연산 완료 → resolve() 실행

- rejected(거부): promise 내부 연산 실패 → 예외처리 

 

 

c) resolve()

- resolve()가 실행되면 promise는 fulfilled 상태가 된다. 즉, 연산이 완료됨을 의미한다. 

- resolve()에 매개변수를 할당하여 데이터를 넘겨줄 수도 있다. 아래의 예시를 참고하자. 

클릭하면 확대됩니다.

 

d) promise의 예외처리 

- 기본적으로 promise의 예외처리는 try, catch를 사용한다. 

 

[예제코드]

function a(number) {
   return new Promise((resolve, reject) => {
      if (number > 4) {
         reject()
      }
      
      setTimeout(() => {
         console.log('A')
         resolve()
      }, 1000)
   })
}

async function test() {
   try {
     await a(8) // 연산이 성공하여 resolve가 동작 -> fulfilled 
     console.log('Resolve!')
   } catch(error) { // 연산 실패로 에러발생 -> rejected
     console.log('Rejected!')
   } finally { // 연산 결과 상관없이 무조건 작동
     console.log('Done!')
   }
   
test()

---

3.  async, await 를 사용할 수 없다면

a) 개발환경의 차이 

- 자바스크립트의 버전에 따라서 async와 await를 사용할 수 없는 환경일 수도 있다. 

- promise → ES6 (2015)

- async, await →ES8 (2017)

 

b) async, await 없이 promise 비동기처리 하기

- then(): resolve()가 실행되고 난 뒤 동작할 코드 → fulfilled 상태에서 실행

- catch(): 에러 또는 연산 실패 → rejected 상태에서 실행

- finally(): promise의 결과에 상관없이 promise실행 후 무조건 동작할 코드 

function a(number) {
   return new Promise((resolve, reject) => {
      if (number > 4) {
         reject()
      }
      
      setTimeout(() => {
         console.log('A')
         resolve()
      }, 1000)
   })
}

function test() {
   a(8)
      .then(() => {
         console.log('Resolve!')
      })
      .catch(() => {
         console.log('Rejected!')
      })
      .finally(() => {
         console.log('Done!')
      })
      
test()

 

- 정리하자면, resolve()는 then()과 함께 사용되고 reject()는 catch()와 함께 사용된다

- resolve() & then() → 연산이 완료된 상태
- reject() & catch() → 연산이 실패한 상태

---

4. async와 await를 사용하는 이유

클릭하면 확대됩니다. 

- 위의 사진은 async와 await를 사용하지 않고 promise의 비동기 처리를 구현한 것이다.

- 코드의 구조를 살펴보면 코드의 형태가 콜백과 유사한 형태를 형성하는 것을 알 수 있다.

- promise를 사용했음에도 콜백의 구조에서 벗어날 수 없는 것이다. 그러므로 콜백의 단점을 그대로 가져가게 된다. 

 

클릭하면 확대됩니다.

- 위의 두 사진은 콜백의 구조를 벗어나기 위해 자바스크립트의 단일 반환 기능을 이용하여 코드를 정리한 것이다.

- 코드 정리를 통해 가독성은 좋아졌으나 여전히 코드간의 의존성이 높은 문제점은 해결하지 못하였다.    

- 이러한 문제를 해결하기 위해 고안된 기술이 async와 await이다.