5.Asynchronous & Promise - Callback, Promise, Async
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]) => {})
Async & Await
프라미스에서 마치 동기처럼 보임으로써 코드 가독성을 높여 사용할 수 있습니다. await
키워드 다음에 등장하는 함수 실행은, Promise 타입을 리턴할 경우에만 의미가 있습니다.
Author And Source
이 문제에 관하여(5.Asynchronous & Promise - Callback, Promise, Async), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@xlsoh/5.Asynchronous-Promise-Updating저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)