비동기 처리(2)

promise

callback이 매개변수로 순서를 이어주었다면 promise는 .then을 통해 이어주게 됩니다.

promise는 3가지 형식으로 이어지게 됩니다.
1. pending -> 대기중
2. fulfilled -> 비동기 성공 -> .then 으로 연결 가능
3. rejected -> 비동기 실패 -> .catch로 err 이유를 알 수 있다.

출처 : https://devrepository.tistory.com/13

const makeCoffee = (element)=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      console.log(element +'을 넣어!')
      resolve()
      }, 2000
    );
  })
}

const coffeePractice = ()=>{
  makeCoffee('커피콩')
  .then(()=>{
       makeCoffee('물')
        .then(()=>{
         makeCoffee('설탕')})
       })
    }    

coffeePractice()

이 식의 결과는
2초의 간격을 두고
'커피콩을 넣어!'
'물을 넣어'
'설탕을 넣어'

가 된다.

하지만 위의 식에서 활처럼 꺾이는 연결고리에서 callback hell의 징조가 보인다...

일명 promise hell

이것이 방지하기 위해서는 promise chaining 기법을 쓴다.

const makeCoffee = (element)=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      console.log(element +'을 넣어!')
      resolve()
      }, 2000
    )
  })
}

const coffeePractice = ()=>{
  makeCoffee('커피콩')
  .then(()=>{
  return makeCoffee('물')})
  .then(()=>{
  return makeCoffee('설탕')})
}    

coffeePractice()

마치 하나하나의 함수식을 이은 것 처럼 한줄로 정렬되어 깔끔하게 식을 인식하고 디버깅을 할 수 있다.

이것을 더욱 간략화 한 것이 바로 신문법 async/await이다.

async/await

async를 함수 앞에 작성하고 promise 형태의 값을 넣어주면 자동적으로 promise의 값을 리턴한다.

또한 await 자체가 resolve의 값을 리턴하게 된다.

const makeCoffee = (element)=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      console.log(element +'을 넣어!')
      resolve()
      }, 2000
    );
  })
};

const coffeePractice = async ()=>{
  await makeCoffee('커피콩');
  await makeCoffee('물');
  await makeCoffee('설탕');
}    

coffeePractice()

await는 자동으로 resolve와 reject를 리턴해주며 다음 await가 나올 때까지 값을 Pending해준다.

따라서 promise에서 쓰인불필요한 문법을 삭제하여 아주 간단하게 함수식을 작성할 수 있다.