오늘은 비동기 작업 제어인 Promise, async / await에 대해서 알아보겠습니다!

Promise

• callback hell에서 어느정도 벗어날 수 있게 도와줌
• Promise내에서 작업들끼리 chaining으로 연결되어 코드의 depth가 매우 감소(Undepth이용)
  

Promise 내장 함수

Promise.all(iterable) : 여러 promise를 동시에 처리할 때 사용

const promise1 = delay(1000)
const promise2 = delay(2000)
const promise3 = delay(3000)

Promise.all([promise1, promise2, promise3]).then(() => {
  //promise1, 2, 3이 모두 처리된 이후 호출
})

API를 한번에 여러개 병렬로 사용할 때등 비동기 작업을 처리할 때 많이 사용

Promise.race(iterable) : 여러 promise 중 하나라도 resolve 혹은 reject되면 종료

Promise.any(iterable) : 여러 promise 중 하나라도 resolve되면 종료

Promise.allSettled(iterable) : 여러 promise들이 성공했거나 실패했거나 상관없이 모두 이행된 경우를 처리

Promise.resolve : 주어진 값으로 이행하는 Promise.then 객체를 만들며, 주어진 값이 Promise인 경우 해당 Promise가 반환
비동기 처리를 안하고 값만 내보내는 경우에 사용

Promise.reject : 주어진 값으로 reject처리 된 Promise.then 객체를 만들며, 주어진 값이 Promise인 경우 해당 Promise가 반환

async / await

Promise가 callback depth를 한단계로 줄여주지만 여전히 불편하다!
하지만 async, await를 이용하면 비동기로 실행되지만,
동기 코드처럼 보이게 짤 수 있어서 순차적으로 실행되는 코드가 가독성을 높여준다!

function run() {
	return 'hello'
}
console.log(run()) // hello

async function asyncRun() {
	return 'hello'
}
console.log(asyncRun()) // Promise {<fulfilled>: "hello"}

async를 사용하게 되면 return값이 promise로 래핑이 된다
async는 promise를 사용하면서 실행이 된다

async function asyncRun() {
	return 'hello'
}
asyncRun().then((message) => console.log(message)) // hello

promise이기 때문에 이렇게도 호출이 가능하다

try catch

• async, await에서 reject발생시 처리하는 방법
• 여기서 catch는 promise의 .catch와 비슷한 역할
• finally도 promise.finally와 비슷한 역할
  
  
  
  
  
  

---

💡 Vanilla JS 수업을 들으면서 평소에 헷갈렸던 부분을 실습을 통해 정리해 보았습니다!

💡 내장 함수 등 필요한 부분에 적절히 사용할 수 있도록 꾸준한 연습이 필요!