Promise

Promise(프로미스)는 자바스크립트에서 비동기 작업을 처리하고 결과를 다루기 위한 객체입니다. 비동기 작업은 일반적으로 네트워크 요청, 파일 로딩, 데이터베이스 조회 등이 포함됩니다. Promise는 이러한 작업을 보다 효율적으로 처리하고 코드의 가독성을 높이기 위해 도입하였습니다. 

 

자바스크립트 비동기 소개

동기 프로그래밍에서 작업은 차례대로 실행되며 작업이 완료될 때까지 중단될 수 없다. 모든 작업은 이전 작업의 실행이 완료될 때까지 기다려야한다. 반면에 비동기 프로그래밍은 임의의 순서로 또는 동시에 작업이 실행될 수 있다.   자바스크립트는 런타임(브라우저나 Node.js)에서 싱글 스레드로 동작합니다. 이말은 즉, 한 번에 하나의 작업만 처리할 수 있다는 뜻입니다. 이렇듯 JS가 싱글 스레드로 동작하지만 콜백, 프로미스, 어싱크 어웨트 방법을 사용하면 자바스크립트에서 비동기 처리를 할 수 있다. 

• Callback: 함수의 파라미터로 함수를 전달한다. 비동기 처리가 끝났을 때 전달된 함수를 실행한다. -> 가독성이 좋지 못해 유지보수 및 디버깅이 어렵다
• 프로미스(Promise 객체 사용): 콜백 대신 사용할 수 있는 방법으로 비동기 작업이 완료되면 결과를 반환하는 객체이다. 프로미스는 상태를 가지고 있으며 처음에는 대기였다가 작업이 완료되면 성공 또는 실패 상태가 됩니다. then(), catch() 메서드를 사용하여 성공과 실패에 대한 처리를 한다
• 어싱크 어웨이트(async, await): 프로미스를 사용하는 비동기 작업을 동기적으로 처리하는 것처럼 코드를 작성할 수 있게 해준다. async가 붙어있는 함수를 실행할 때 await 키워드를 사용하여 비동기 작업이 완료될때까지 기다릴 수 있다. 여기서 말하는 비동기는 콜백이 아니라 프로미스이다. 즉 async가 붙은 함수는 프로미스를 반환한다고 보면 된다.

이제는 Promise와 async await 덕분에 비동기 코드를 가독성 좋게, 디버깅하면서 편하게 작성할 수 있게 되었다.

Synchronous vs Asynchronous

• Synchronous: Only one operation can be in progress at a time -> 한번에 한가지 일만 
• Asynchronous: Allow programs to do more than one thing at a time -> 여러가지 일 동시에

비동기 코드 스타일은 두가지 유형이 있다.

 

첫 번째는 async callback이고 두번째는 promise-style code이다. 전자는 old-style 이고 후자는 new-style 이다.

Promise

프로미스는 비동기 함수의 성공과 실패를 나타내는 객체이다. 대부분의 현대 API들은 프로미스를 기반으로 한다. 'fetch' 를 통해 브라우저는 서버에게 HTTP Request를 할 수 있다. 이는 XMLHttpRequest 보다 더 심플하고 효율적인 버전이다. fetch를 통해 Http Request를 보내고 Promise object를 돌려 받는다. 여기서 then() and catch() methods를 활용한다. 

 

Promise 객체는 세 가지 상태를 갖는다

 

대기(Pending): 비동기 작업이 아직 완료되지 않은 상태입니다. 즉, 결과가 아직 알려지지 않은 상태

이행(Fulfilled): 비동기 작업이 성공적으로 완료되어 결과 값이 있는 상태입니다. Promise 객체는 이때 결과 값을 가지고 있습니다.

거부(Rejected): 비동기 작업이 실패하거나 오류가 발생한 상태입니다. Promise 객체는 이때 오류 정보를 가지고 있습니다.

 

<예시 코드>

fetch('product.json')
.then(function(response))
	return response.json();})
.then(function(json) {
	let products = json;
    initialize(products);})
.catch(function(arr)) {
	console.log('에러 발생'); 
});

Example: infinite Scroll

when reaching the bottom of a page, we can load an additional set of posts or article repeatedly. 추가적인 content를 비동기적으로 로드한다.그리고 기존페이지에 새로운 content를 추가하기 위해 DOM을 수정한다. window.onscroll() 활용

 

Promise vs Callbacks

Promise 를 활용하면 then() method를 통해 여러개의 비동기 함수를 연결할 수 있다. 비동기 함수의 결과를 다음 비동기 함수의 input으로 넣음으로써 chain 가능. 하지만 여러개의 비동기 함수를 연결하기 위해  Callback을 사용할 경우 매우 어렵다. 또한 에러 처리도 much better. 모든 에러가 .catch() block을 통해 처리된다. 

Promise vs Event Listener

A promise can only succeed or fail once 즉, 성공과 실패 두번 불가능. 그리고 실행이 완료되면 성공 -> 실패 또는 실패 -> 성공으로 switching될 수 없다.

if a promise has succeed or failed and you later add a success/failure callback