Promise?

Promise란?

Promise는 자바스크립트에서 비동기 처리를 간편하게 처리할 수 있도록 도와주는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. 비동기 처리에 관해선 이 전 포스트를 참고해 주세요 :)

Promise의 역할

Promise는 주로 웹 서비스 구현 시 원활한 데이터 통신을 위해 활용됩니다.
서버에 데이터를 요청했을 때, 데이터를 모두 받아보기 전에 웹에 출력하려고 할 때 발생하는 오류를 방지하기 위해 활용됩니다.

Promise의 상태

Promise 객체가 생성되고 종료될 때까지는 아래와 같이 3가지 상태(state)를 갖습니다. 여기서 상태란 Promise의 처리 과정을 의미합니다.

Pending : 대기 (비동기 로직 처리의 미완료 상태)
Fulfilled : 이행 (비동기 로직 처리가 완료된 상태로 Promise 결괏값 반환 상태
Rejected : 실패 (비동기 로직 처리의 실패 또는 오류 상태)

Pending(대기)

다음과 같이 Promise 객체를 생성하면 대기(Pending) 상태입니다.

new Promise()

new Promise() 메서드 호출 시 콜백 함수를 선언할 수 있으며, 인자는 resolve와 reject입니다.

new Promise((resolve, reject) => {})

Fulfilled(이행)

Promise는 resolve와 reject라는 두 개의 인자를 가집니다.
콜백 함수 인자인 resolve를 실행하면 이행된(Fulfilled) 상태입니다.
이행된 상태를 다른 말로 완료된 상태라고도 합니다.

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

이행 상태가 되면 then()을 활용하여 결괏값을 받을 수 있습니다.

function getData() {
	return new Promise((resolve, reject) => {
    	let data = 10;
        resolve(data);
    })
}

getData().then((resolveData) => console.log(resolvedData)); // 10

then() 메서드가 호출되면 새로운 Promise 객체가 반환됩니다. 즉, then() 메서드를 활용하여 여러 Promise 객체를 연결할 수 있으며, then() 메서드 활용 개수 제한은 없습니다.

function increment() {
	return new Promise ((resolve) => {
    	setTimeout(function() {
        	resolve(1)
        }, 2000)
    })
    .then(function (res) {
    	console.log(res)  // 1
        return ++res 
    })
    .then(function (res) {
    	console.log(res)  // 2
        return ++res
    })
    .then(function (res) {
    	console.log(res)  // 3
        return ++res 
    })
}

위 코드의 실행결과는 다음과 같습니다.

1
2
3

Rejected(실패)

Promise 객체의 인자인 reject는 호출 시 실패(Rejected) 상태가 됩니다.

new Promise(function(resolve, reject) {
	reject()
})

resolve와 마찬가지로, 실패 상태가 되면 catch()를 활용하여 결괏값을 받고 예외 처리할 수 있습니다.

function getData() {
	return new Promise((resolve, reject) => {
    	reject(new Error('This is rejected!;);
    })
}

getData().catch((err) => console.log(err))

활용 예시

reject() 메서드는 예외 발생 시 catch()를 활용해 결과값을 받고 처리할 수 있다고 했습니다. Promise 객체에서 조건식에 따라 then() 메서드 또는 catch() 메서드를 활용하여 로직을 처리할 수 있습니다.

function App () {
	const func = () => {
    	new Promise((resolve, reject) => {
        	if (3 > 4) {
            	resolve(100)
            } else {
            	reject(200)
            }
        })
        .then((result) => {
        	console.log('resolve: ', result);
        })
        .catch((result) => {
        	console.log('reject: ', result);
        })
    }
    
    return (
    	<div>
        	<button onClick={() =>func()}>클릭</button>
        </div>
    )
}

export default App

fetch API

fetch 메서드는 대표적인 비동기 요청방식 중 하나인 Ajax의 방식 중 하나입니다.
fetch는 Promise 객체를 반환합니다.

기본 구조

fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.catch((error) => console.log(error));

기본적인 구조와 동작은 Promise와 동일합니다.
파라미터로 요청을 보낼 url을 입력해주고,
then에서 응답 객체 response를 받고, catch에서 에러 요청을 처리할 수 있습니다.

fetch api에 대해선 다음 포스팅에서 더 자세히 알아보도록 합시다 :)