Chapter [ 비동기 ]

비동기적 (async) : 동시적, 병렬적으로 처리
동기적 (sync) : 순차적, 직렬적으로 처리

ex)

카페에서 커피를 주문할 때, 앞사람이 주문을 하고 주문한 커피를 다 제공한 다음, 다음 사람의 주문을 받는다면 동기적 처리

반대로 모든 사람의 주문을 한꺼번에 받고 커피가 완성되는 대로 사람들에게 커피를 제공한다면 비동기적 처리

[ 콜백함수 ]

1. 콜백함수는 특정 함수에 매개변수로 전달된 함수로, 함수 안에서 어떤 특정한 시점에 다시 호출되는 함수를 말한다.

2. 단점 으로는 콜백 함수가 반복되어 코드의 들여쓰기의 정도가 깊어지는 콜백지옥 이 나타난다.

[ Promise ]

1. Promise는 비동기적으로 실행하는 작업의 결과(성공 or 실패) 를 나타내는 객체 이다.

2. 프로미스의 3가지 상태(states)

   • pending(대기): 이행되거나 거부되지 않은 초기 상태

   • fulfilled(이행): 연산이 성공적으로 완료된 상태

   • rejected(실패): 연산이 실패한 상태

3. Promise 사용방법

const promise = new Promise((resolve, reject) => {
    // 시간이 걸리는 것들, 네트워크 통신, 파일 읽어오기 (비동기적 처리)
    // 성공시 resolve 콜백함수 호출 해서 전달
    // 실패시 reject(new Error(‘에러 이유’))
    // 꼭 resolve, reject 이용해서 완료
})

4. Promise 의 특징

   • new Promise(...) 하는 순간 여기에 할당된 비동기 작업은 바로 시작된다.

5. Promise 메서드 체이닝(method chaining)

promise //
      .then((value) => {
	// promise가 정상적으로 수행이 되면 resolve 콜백함수를 통해 전달한 값이 나온다.
	// 값을 바로 전달 할 수 있고, promise를 전달 할 수 있다.
       })

       .catch(error => {
	// promise에 에러가 발생 했을 때 처리할 콜백함수 등록
       })

       .finally(() => {
	// 성공하든 실패하든 상관없이 어떤 기능을 마지막으로 수행하고 싶을 때 사용
       })

6. Promise.all

   • 여러 비동기 동작을 한꺼번에 기다리기
   • 여러개의 Promise를 처리하기 위해 사용
   • 배열 내 모든 값의 이행(또는 첫 번째 거부)을 기다린다.

Function pickAllFruits(){   
   return Promise.all([getApple(), getBanana()])
   .then((다 받아진게 들어온다)join( ‘ + ’ ));
}

7. Promise.race

   • 배열에 전달된 promise 중에서 가장 먼저 값을 리턴하는 것이 전달된다.

Function pickAllFruits(){   
    return Promise.race([getApple(), getBanana()])
}

[ async / await ]

1. async 키워드를 함수 앞에 쓰면 코드 블록이 자동으로 promise로 바뀌면서 Promise 객체 를 반환

2. async 는 함수를 Promise로 return하는 함수로 만든다.

3. await 는 뜻으로도 알 수 있듯이 말그대로 "기다리다"이다.

   • async 함수에서만 사용할 수 있다.

   • 문법적으로 await [[Promise 객체]] 이렇게 사용

   • Promise 가 완료될 때까지 기다린다.

   • Promise 가 resolve 한 값을 내놓는다.

   • reject 가 발생한다면 예외가 발생하는데 이 예외 처리를 하기 위해 try-catch 구문 을 사용

const funcAsync = async () => {
  try {
    await delaySecond(3);
    return true
  } catch (error) {
    console.log(error);
    return false
  }
};

4. async / await 사용방법

async function pickFruits() {
    const applePromise = getApple()
    const bananaPromise = getBanana()
    // promise를 만들면 바로 실행되기 때문에 병렬적으로 동시에 실행
    const apple = await applePromise;
    const banana = await bananaPromise;
    return `${apple} + ${banana}`
}

[ fetch API ]

fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환 한다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve 하고, 실패했을 경우에는 예외(error) 객체를 reject 합니다.

fetch(url)
  .then((response) => response.json()) // 자체적으로 json() 메소드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달합니다
  .then((json) => console.log(json)) // 콘솔에 json을 출력합니다
  .catch((error) => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다