[JavaScript/자바스크립트]Promise 문법

동기적 처리와 비동기적 처리

동기적 처리

작업을 순차적으로 진행하는 것을 동기적으로 처리한다고 한다. A, B, C 3가지 작업을 순서대로 진행한다고 하면, A 작업이 시작되어 완전히 완료된 후 B 작업을 수행한다. 마찬가지로  B 작업을 모두 마친 후에 C 작업을 수행한다. 

비동기적 처리

동기적 처리와는 다르게 작업의 순서롤 보장하지 않는다. A 작업을 시작한 후 완료가 되기 전에  B 작업과 C 작업을 대기시키지 않고 바로 시행한다. 

 

 

Promise 란

Promise는 자바스크립트에서 비동기 처리에서 사용되는 객체이다. 

비동기 작업이 완료되면 그 값을 알려주는 역할을 한다. 일단 Promise를 돌려준 후, 작업이 완료되면 결과값을 promise에 채워준다. 
Promise는 Pending(대기), Fulfilled(이행), Rejected(실패) 총 3가지의 형태를 지닌다.

 

Promise를 다룰 때는 then 메소드 혹은 async/await 문법을 사용한다. 

 

.then()을 이용한 Promise 처리

const promise = fetch('주소').then((res) => {
	res.json();
})

fetch() 이후에 작성된 콜백함수를 시행한다.

콜백 함수의 형식이기 때문에 프로그램이 길어지면 다소 복잡해질 수 있다. 

async/await를 이용한 Promise 처리

const response = await fetch('주소');
const data = await response.json();
console.log(data);

비동기적 처리가 필요한 부분 앞에 await 키워드를 작성해주면 된다. 

async는 비동기 처리를 수행하는 함수 앞에 작성하여준다. 

//일반 함수
async function print(){
	const response = await fetch();
}

//화살표 함수
const print = async () => {
	const response = await fetch();
}

print();
console.log(1);
console.log(2);

async 함수 내부에서 awiat를 통하여 fulfilled를 기다리는 Pending 상태동안 함수 밖에 있는 코드들을 먼저 실행하게 된다.

Pending이 종료되면 다시 함수 내부의 로직을 실행한다. 

 

try/catch문을 통한 오류 처리

await 키워드를 통해 비동기 처리가 이루어지는 부분을 try문으로 감싸고, 오류가 발생해서 처리할 부분을 catch문으로 따로 작성하여준다. 

const print = async () => {
	try{
		const response = await fetch('주소');
		const data = await response.json();
	}
	catch (e) {
		console.log(e);
	}
	console.log(finished);
}

오류가 발생한 시점에 catch문이 실행되고, 이후 try-catch문 밖 코드를 실행한다. 

 

효율적인 비동기 처리 코드

const print = async () => {
	for(let i = 0 ; i < 10 ; i++){
		const reponse = await fetch(`주소/${i}`);
		const data = await reponse.json();
		
		console.log(data);
	}
};

위 코드의 경우 API 연결이 한 번 진행될 때마다 await를 부른 후 함수 밖에서 대기를 한다. await의 작업이 끝날 경우 다시 함수 안으로 돌아와 다음 작업을 진행하고, 모든 작업을 마친 후에 다시 API 연결을 진행하게 된다. 

이는 상당히 비효율적이라 할 수 있으며, 비동기 처리의 이점을 제대로 사용하지 않고 있다.

 

const print = async (id) => {
	const response = await fetch(`주소/${id}`);
	const data = await reponse.json();
		
	console.log(data);
}

for(let i = 0 ; i < 10 ; i++){
	print(i);
}

해당 코드를 다음과 같이 수정한다. 

API 연결을 진행하는 반복문을 함수 밖으로 빼주었다. 

따라서 print 함수에서 API 연결을 진행하고 await 하는 동안, 함수 밖에 있는 for문에서 다음 print() 함수를 호출하여 계속해서 API 연결을 진행할 수 있다. 

 

무조건 async/await를 사용하기 보다는 await의 동작 시점을 잘 파악하여 적절한 비동기 처리를 진행해주어야 한다 !