Promise, async/await

비동기적으로 코딩을 하기위해 콜백함수를 사용한다.

알아두면 좋은 것 : network, read files는 비동적기적으로 실행하면 좋다

하지만 콜백함수를 사용할 때 계속해서 콜백함수를 사용해야 되는 경우가 있다.
그럴경우 콜백지옥이 된다.
콜백지옥의 안좋은 점은 가독성이 떨어지며 로직을 변경하기 어려워진다.

콜백지옥 해결 방법으로는 두가지가 있다 Promise와 Async/Await

Promise

Promise 특성을 알아야 한다.

• state : pending(대기) -> fulfilled(성공) or rejected(실패)
• 원하는 기능을 수행해서 해당하는 데이터를 만들어내는 Producer
• 원하는 데이터를 소비하는 Consumer

const promise = new Promise((resolve,reject) => {
  //Promise는 class기 때문에 인스턴스로 obj를 만들어준다.
  //Promise는 executor로 resolve 콜백함수와 reject 콜백함수가 있다.
  //새로운 promise가 만들어질 경우 executor는 바로 실행된다.
})

성공하여 수행이 된다면(resolve) .then을 사용하고
실패한 경우 (reject) .catch를 사용한다
성공,실패 상관없이 호출되는 .finally가 있다.

Promise Chaining

Promise안에 또 다른 Promise가 생성됨
비동적기적인 코딩들을 묶어서 처리 가능

알아두면 좋은 것.

Promise Chaining을 사용할 때
.then(호출할 함수)를 사용하면 받은 값을 바로 인자로 넣어서 호출한다.

Async

Async는 깔끔하게 Promise를 사용할 수 있게 해준다.

함수 앞에 async를 사용하여 Promise를 새로 생성하지 않고 사용가능하다

async function state(){
  //함수 앞에 async를 사용하여 Promise를 편리하게 사용할 수 있다.
    return "성공"
}

const stateValue = state(); 
stateValue.then(console.log); // "resolve가 되면 console.log함"
console.log(stateValue);

Await

await는 async가 붙은 함수 안에서만 사용이 가능하다.

(콜백함수를 사용하기 위해서는 async와 await 키워드를 사용)

function delay(s)
    return new Promise(resolve => setTimeout(resolve, s)){
      // 새로운 Promise를 반환하는데 s변수를 받아서 resovle를 가짐
    }

async function start(){
 await delay(3000); // delay함수 3초 전달함
  return "start";
}

async function stop(){
  await delay(2000);
  return "stop";
}

//Promise 형식으로 start와 stop을 둘 다 출력하는 함수를 만든다면

function state (){
  return start()
  .then(s1 => {
      return stop()
    then.(s2 =>`${s1} + ${s2}`);
  });
}
//위와 같은 형식으로 짜게 되고 가독성이 떨어지게 됨

async function state2(){

  const s1 = await start();
  const s2 = await stop();
  return `${s1} + ${s2}`
}
//위와 같이 async를 사용하면 간단한 코딩이 가능하다.
  //병렬적으로 처리 할 경우 Promise.all 사용

function allState(){
  return Promise.all([start(),stop()])
  //Promise.all을 사용하여 병렬적으로 출력이 가능하다.
```![](https://velog.velcdn.com/images%2Finde153%2Fpost%2F3ba71f10-766d-47d5-8d6a-b6dcf3994841%2F20191015030324_guhaszti.png)