비동기를 제어하고 싶을때 callback을 사용한다

• callback은 (err, data) 로 넣어서 작업하는경우가 많다
• callback을 사용했더니 CallbackHell 발생하게 되었고 코드 가독성과 관리성을 위해 Promise 사용하게됨

Promise

• new Promise(() ⇒ {}) 를 사용하여 promise 객체로 만들어 사용해 줘야 한다

//데이터 넘길때 (resolve(데이터 넘기기), reject (에러핸들링))
let promise = new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

//넘겨받은 데이터 사용할때 (.then(return 체이닝 잘해줘야 PromiseHell 방지)
.then(() => {})

//.catch(reject 있을때 마지막 체인에 작성)
.catch(() => {})

• Promise의 세가지 상태

  1. 대기(pending): 이행하거나 거부되지 않은 초기 상태
  2. 이행(fulfilled): 연산이 성공적으로 완료됨
  3. 거부(rejected): 연산이 실패함

• Promise.all 사용법 - 내용 추가하기

    Promise.all([...promises...])

    // 여러 resolve가 담긴 배열이 리턴 됨
    .then(data => console.log(data))

1. 모든 약속이 성공적으로 완료되면 최종 데이터 전달.
2. Promise.all에 전달되는 프라미스 중 하나라도 거부되면, 반환하는 프라미스는 에러와 함께 바로 거부됩니다.

async/await

async/await 는 콜백 함수와 프로미스의 단점 과 가독성을 보완한 비동기 패턴이다

• 작동원리
  1. 출력 함수 앞에 async를 붙이고 promise 앞에 await를 붙이면 promise를 동기적으로 사용할 수 있다

    async function fun() {
      await Asynchronous();
    }

• 예외 처리 (try~catch)

    async function fun() {
    try {
      await Asynchronous();
    	} catch (err) {
        console.log(err);
      }
    }

• Asyncd의 순서를 제어하고 싶을때는?
  1. Callback 을 사용한다! (Async를 핸들할수 있는 녀석)
• await 다음에 등장하는 함수 실행은 어떤 타입을 리턴할 경우에만 의미가 있고, 어떤 값이 리턴되나요?
  1. promise를 return 하는 함수여야 하며, Promise 가 아닌 경우에는 그 자체가 반환 된다.

추가로 공부할 것

• yield - react 비동기 상황에 많이 쓰이는 js 함수 (es6)