async / await

async / await

• 비동기의 한줄기 빛이자 소금이요.
• promise의 문법적 설탕.
  → 문법적 설탕이란 복잡한 문법을 간단한 키워드만 작성하여 동일한 동작을 하게끔 하는 것.

async

• async function 함수이름 () {} 혹은 const 함수이름 = async () => {} 로 async를 사용 할 수 있다.
• 함수 앞에 async 키워드를 작성함으로써 사용이 가능하며, 이때 반환되는 함수는 Promise 가 된다.
  → 따로 Promise 인스턴스를 리턴할 필요가 없다.
• under the hood , 즉 내부의 로직은 Promise와 동일하게 작동하므로, .then 을 사용 할 수 있다.
• 그러나, async 는 await 과 함께 사용하는 경우가 잦다.

await

• async 함수 내부에서 await 메소드명 으로 사용한다.
• async 내부에서 await과 함께 변수로 지정된 값은, await 뒤에 작성된 메소드가 처리되면 그때서야 변수에 해당 메소드가 반환하는 값을 할당한다.

const nP = (value) => {
  return new Promise((resolve, reject) => {
  resolve(value)
})

function someFn () {
  nP('hello')
  .then((value)=>{
    console.log(value)
  })
}

async function someFn2 () {
  const  = await nP('hello')
  console.log(value)
}

// 위의 두 함수는 동일한 동작을 한다.

• 간단하게 정리하자면, await을 .then 대신에 사용하는 것과 같다.
• 변수에 값을 메소드가 처리되기를 기다렸다가(await) 넣어준다.

let func1 = () => {
  return new Promise((resolve, reject) => {
    resolve(1)
  })
}
let func2 = (msg) => {
  console.log(msg)
  return new Promise((resolve, reject) => {
    resolve(2)
  })
}
let func3 = (msg) => {
  console.log(msg)
  return new Promise((resolve, reject) => {
    resolve(3)
  })
}

const result = async () => {
  let first = await func1()
  let second = await func2(first)
  let third = await func3(second)
  console.log(third)
}

// 1
// 2
// 3

error handling

• try - catch 문을 사용하여 에러를 처리 할 수 있다.

// promise1~3 은 promise 객체를 가진 변수로 가정한다.

const result = async () => {
  .try{
    let a = await promise1
    let b = await promise2
    let c = await promise3
  
    console.log(a, b, c)
  } 
  .catch{
	  console.log('ERROR!!')
  }  
}

• reject 가 호출되면 .catch의 내용이 출력된다.

---

+

• async 는 일반 promise 문법처럼 .then, .catch 등 promise의 문법을 사용 할 수 있다.
• 반면 await 은 async 함수 내부에서만 사용 할 수 있으며, 다른 함수에서 사용하는 경우 에러가 발생한다.