Javascript async / await

목차

1. Promise의 한계

2. async와 await

---

1. Promise의 한계

 

Promise는 만들기가 굉장히 어렵다는 단점이 존재한다.

 

그리고 프로미스 체이닝을 사용하여, 연결을 할 때에 아래로 길게 뻗어나가 보기가 불편하다는 점도 있다.

 

이를 해결하기 위해서 async와 await이 등장했다.

---

2. async와 await

 

async와 await을 사용하면, Promise를 좀 더 편하게 사용할 수 있다.

 

async 함수

async function a () {
    return "a"
}

const b = async () => {
    return "b"
}

 

정말 간단하게 함수 앞에 async를 붙이면 된다.

 

함수 앞에 async를 붙이게 되면 함수는 항상 프라미스를 반환한다.

 

async가 붙은 함수는 프라미스를 반환한다. 프라미스가 아닌 것이라도 프라미스로 감싸진다.

 

 

await

 

async안에서만 사용이 가능하다.

 

await이 되려면 반드시 프로미스 객체여야한다.

 

await은 프라미스의 상태 pending이 resolve가 될 때까지 기다린다.

 

 

 

sample)

아래의 코드로 결과값을 예측해보자.

 

const b = async () => {
  return "b"
}

const a = async () => {
  const result = await b()
  console.log(result)
  return "c"
}

// ===================

a()
// b

// ===================

console.log(a()) 
// Promise { <pending> }
// b

// ===================

b()
// 아무것도 출력되지 않는다.

// ===================

console.log(b())
// Promise { 'b' }

// ===================

 

sample2)

 

const avante = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('avante go')
        }, 3000)
    })
}

const sonata = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('sonata go')
        }, 2000)
    })
}

const genesis = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('genesis go')
        }, 1000)
    })
}

const init = async () => {
    console.time('x')
    // 3초 , 2초 , 1초 이지만
    // genesis를 얻기 위해서는 가장 오래걸리는 avante의 시간만큼 기다려야한다.
    const result = await Promise.all([avante(), sonata(), genesis()])
    console.log(result)
    console.timeEnd('x')
}

init()

// [ 'avante go', 'sonata go', 'genesis go' ]
// x: 3.008s

 

---