Promise를 사용한 비동기 통신 && async, await 를 사용한 비동기 통신

자바스크립트는 싱글 스레드 언어다(Single Threaded Language). 한 번에 한 개의 일만 처리할 수 있다는 뜻
언어 자체는 병렬처리(여러가지 일처리)가 불가능하지만 자바스크립트를 해석하고 실행하는 엔진 내부에서는 병렬 처리가 가능하다
(출처 https://techlog.io 자바스크립트 비동기통신 Callback, Promise, Async/Await 이해하기)

✍ 비동기 통신의 예

• 병렬처리를 하는 것을 비동기 작업이라고 하고 대표적으로는 CallBack, Promise, Async/Await가 있다.
  그 중 Promise, Async/Await을 정리해보고자 한다

제목 : 콜백지옥

• 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제
• 콜백함수 안에 비동기 처리 결과를 넣어서 또 다른 비동기 처리 매개변수로 전달 할 수 있다.

🙃Promise란?

약속해줘🎵

• 콜백과 하는 일은 같지만 콜백지옥을 해소해준다
• 언젠가 완료가 되는 작업의 결과값을 담는 상자와 같은 역할
  - Promise의 3가지 상태(states) : Pending(대기), Fulfilled(이행, 비동기 처리완료), Rejected(실패, 오류발생)
  • 비동기처리 성공하면 콜백함수의 인수로 전달받은 resolve함수를, 실패하면 reject함수를 호출
    - Promise는 작업이 끝난 후 .then(),.catch()를 통하여 후속처리를 할 수 있다. 후속처리를 하면 선택적으로 콜백함수가 호출된다

//callback 함수 생략
valueNumber(15, res => {
  valueNumber(res, res => {
    valueNumber(res, res => {
      valueNumber(res, res => {
        console.log(res)
      })
    })
  })
})

//promise사용시
function valueNumber(num) {
  return new Promise(resolve => setTimeout(() => resolve(num + 15), 100));
} 

valueNumber(15)
  .then(valueNumber) //valueNumber함수의 결과값은 Promise로 리턴함
  .then(valueNumber)
  .then(valueNumber)
  .then((res) => console.log(res))

• Promise 예외처리
  - .catch()메소드로 에러를 잡아낼 수 있다. (콜백은 if-else문으로 사용)

valueNumber(15)
  .then((res) => {
        throw 'New Error';
    })
  .catch((error) => console.log(error));

🤗Async/Await란?

• 비동기 함수를 마치 동기적 코드인 것처럼 동작하도록 구현할 수 있다.
• 사용할 함수 앞에 async키워드 붙여 사용하고 async가 붙여진 함수 안에서만 await 키워드 사용가능
• await는 함수의 작업이 끝나고 결과값을 반환할 때까지 기다리고 결과가 반환되면 다음 작업 수행한다
• asyn/await 예외처리
  - async 함수의 return 값이 암묵적으로 Promise객체를 반환하기에 Promise가 지원하는 메서드들을 사용할 수 있기에 .catch()메서드를 사용할 수 있다
  • try-catch를 이용하여 에러를 잡을 수도 있다

//catch() 이용시
async function examA() {
  const value1 = await valueNumber(15).then(res => res);
  const value2 = await valueNumber(value1).catch(error => error);
  console.log(value1, value2)
}
examA();

//try-catch이용시
async function examB() {
  try {
    const value1 = await valueNumber(15)
    const value2 = await valueNumber(value1)
    console.log(value1, value2)
  } catch(error) {
    console.log(error)
  }
}
examB();

---

출처: https://techlog.io/Javascript/General/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B9%84%EB%8F%99%EA%B8%B0%ED%86%B5%EC%8B%A0-callback-promise-async-await-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/
https://springfall.cc/post/7
https://ryurim.tistory.com/137