[JavaScript] 프로미스와 프로미스 API구조

강의를 보다가 프로미스, .then 사용에대한 설명이 없어서 공부할 겸 적는 포스팅

 

 

프로미스란?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체 

 

비동기 처리란?

특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행함

 

프로미스가 필요한 이유?

서버에서 받아온 데이터를 화면에 표시할 때 사용한다.

내가 인턴생활 할 때 한글과 번역문을 가지고 엑셀 만드는 일을 했는데 

파파고API를 사용하여 문장 번역 스크립트를 짰는데 3000문장 당 15분 정도 걸렸다.

이때 프로미스 개념을 적용하자면 

프로미스를 사용하지 않았다면, 번역되는 15분을 기다리지 않고 바로 엑셀을 생성했을 것이다 

그러면 한글과 빈 번역문의 엑셀파일이 생성 되었을 것이다.

이와 같은 문제점을 해결하기 위해 나온 것이 프로미스 

 

프로미스의 3가지 처리과정

• 대기: 비동기 처리 로직이 완료되지 않은 상태
• 이행: 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• 실패: 비동기 처리 실패 or 오류 발생 상태

대기 

new Promise();

new Promise() 메서드를 호출하면 대기 상태가 된다.

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject다.

new Promise(function(resolve, reject){

});

이행

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

resolve를 실행하면 이행 상태가 된다.

이행상태가 되면 .then()을 이용하여 아래와 같이 처리 결과 값을 받을 수 있다.

 

function getPapago(){
	return new Promise(function(resolve, reject){
    const en = 3000;
    resolve(en)
     });
    }
    
//resolve 결과값 en을 resolvedEn으로 받음
getPapago().then(function(resolvedEn){
	console.log(resolvedEn); //3000
});

=> 3000

 

적용

현재 만들고 있는 유튜브 로직에서 .then부분에 대한 console.log하여 불러온 데이터값

console.log 결과

 

 

지금은 개념을 이해하고 감을 잡는데 집중하고 

추후에 프로미스를 사용하여 로그인 로직을 만든다거나 할 때 https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기

를 참고해야겠다. 

 

* 프로미스관련 참고 캡틴판교님