2022-07-02(토) TIL

Promise

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.
여기서 자바스크립트의 비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미합니다.

Promise가 왜 필요할까?
프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다.
일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 A
PI를 사용합니다.

$.get('url주소/products/1', function(response){
	// ...
});

위 API가 실행되면 서버에다가 '데이터 하나 보내주세요'라는 요청을 보냅니다.
그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜹니다.
이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스입니다.

프로미스 코드 - 기초

function getData(callbackFunc){
	$.get('url 주소/products/1', function(response){
    callbackFunc(response)
    //서버에서 받은 데이터 response를 callbackFunc()함수에 넘겨준다.
    })
}

getData(function(tableData){
	console.log(tableData)
    //$.get()의 response 값이 tableData에 전달됨
})

위 코드에 프로미스를 적용하면 아래와 같은 코드가 됩니다.

function getData(callback){
	//new Promise()추가
	return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response){
	//데이터를 받으면 resolve()호출
    resolve(response);
    });
    });
}

getData().then(function(tableData){
	//resolve()의 결과 값이 여기로 전달됨
	console.log(tableData);
    //$.get()의 response 값이 tableData에 전달됨
})