5.Asynchronous & Promise - Callback, Promise, Async

xlsoh·2020년 9월 22일

IM-TIL asynchronous

TIL

목록 보기

13/23

Sync vs Async

Synchronous (동기) vs Asynchronous (비동기)

->시간의 관점 (결과물을 가져오는 시점)

Synchronous (동기)

요청이 들어온 순서에 맞게 하나씩 처리하는 방식입니다. 요청에 대한 결과가 동시에 일어납니다.

Asynchronous (비동기)

요청에 응답을 즉시 처리하지 않아도, 그 대기 시간동안 또 다른 요청에 대해 처리 가능한 방식입니다. 요청에 대한 결과가 동시에 일어나지 않습니다.
case) 클라이언트-서버, 이벤트 핸들링, 애니메이션

Blocking vs Non-Blocking

-> 실행의 관점

블록킹/논블록킹이 동기/비동기와 같다고 생각하는 경우가 많지만, 서로 관점이 다릅니다.
블록킹과 논블록킹은 프로그램이 바로 실행할 수 있는 유무에 따라 나누어 집니다.

Blocking I/O Model

직접 제어할 수 없는 대상의 작업이 끝날 때 까지 프로그램은 대기해야 합니다.

Non-Blocking I/O Model

Blocking과 반대로, 직접 제어할 수 없는 대상의 작업의 처리 여부와 상관없이, 프로그램은 대기 없이 바로 작업가능 합니다.

Callback

비동기의 순서를 제어하고 싶을 경우에 사용할 수 있습니다.

Promise

콜백의 콜백 헬, 가독성 낮음, 에러 핸들링이 어려움 같은 단점을 핸들링 하고자 할 경우 사용할 수 있습니다. 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다.

비동기 작업은 성공 또는 실패 합니다.
프로미스의 실행 함수 resolve reject는 성공 시 resolve(), 실패 시 reject()가 실행됩니다.

new Promise()를 통해 생성한 Promise 인스턴스에는 메소드 .then .catch가 있습니다. .then()을 이용하여 처리 결과 값을 받을 수 있고, .catch()를 이용하여 실패한 이유(실패 처리의 결과 값)을 받을 수 있습니다. 두 메소드는 Promise 객체를 리턴합니다.

프로미스의 3가지 상태
1. Pending(대기) : 이행하거나 거부되지 않은 초기 상태

new Promise(function(resolve, reject) {
  // ...
});

fulfilled(이행) : 연산이 성공적으로 완료됨

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 1;
    resolve(data);
  });
}
// resolve()의 결과 값 data를 resolvedData에 받음
getData().then(function(resolvedData) {
  console.log(resolvedData);  // 1
});

rejected(거부) : 연산이 실패함

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("failed"));
  });
}
// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err);  // Error: failed
});

Promise.all 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다.
Promise.all([promise1, promise2])
Promise목록은 동시에 실행됩니다. 모두 성공해야 .then , 하나라도 실패 시 .catch.
.then (([resp,resp]) => {})