[Javascript] - promise 함수

비동기 프로젝트 2탄. promise 함수

어려워도 너무 어렵다..ㅠㅡㅠ

같은 영상과 글을 2,3번 반복해도 잘 이해가 안 되는 개념이지만

공부한 내용을 정리해보려고 한다.

 

이 글을 처음 보시는 분이시라면 전의 callback 함수를 이해하고 오시는 것을 추천드립니다.

https://luka-frontend.tistory.com/6?category=1014651

---

Promise란?

promise는 자바스크립트의 오브젝트로 비동기적인 것을 수행할 때 콜백 함수를 대신해서 사용할 수 있다.

 

3가지 상태 State 및 처리 흐름

pending(대기): 처리가 완료되지 않은 상태

fullfilled(이행): 성공적으로 처리가 완료된 상태

rejected(거부): 처리가 실패로 끝난 상태

 

제작 코드와 소비 코드

제작 코드(Producing Code): 원격에서 스크립트를 불러오는 것 같은 시간이 걸리는 일을 한다.

소비코드(Consuming Code): '제작 코드'의 결과를 기다렸다가 이를 소비한다.

 

프로미스 객체는 아래와 같은 문법으로 만들 수 있다.

//새로운 프로미스가 만들어 질때는 우리가 전달한 실행함수(executor)가 바로 자동적으로 실행이 된다.
const promise = new Promise((resolve, reject) => {
    console.log('doing something...'); //executor(제작코드)
})

executor의 인수 resolve와 reject는 자바스크립트에서 자체 제공하는 콜백 함수이다.

resolve는 일이 성공적으로 끝난 경우 value와 함께 호출

reject는 에러 발생 시 에러 객체를 나타내는 error와 함께 호출

정리하면 executor 함수는 자동으로 실행이 된다. 처리 성공 여부에 따라 resolve 나 reject를 호출한다.

 

---

제작 코드(Producing Code) 만들기 - Promise 만들기

//1. Producing Code
const promise = new Promise((resolve, reject) => {
    //doing some heavy work(network, read files)
    console.log('doing something...');
    setTimeout(() => {
        resolve('luka');
    }, 2000);
});

기능을 잘 수행했다는 resolve 함수를 호출한다.

2초 정도 무언가를 하다가 일을 잘 마무리해서 resolve라는 콜백 함수를 호출

'luka'라는 값을 전달해주는 promise를 만들었다.

 

소비코드(Consuming Code) 만들기 -Promise 사용하기

//1.Producing Code
const promise = new Promise((resolve, reject) => {
    //doing some heavy work(network, read files)
    console.log('doing something...');
    setTimeout(() => {
        resolve('luka');
    }, 2000);
});

//2.Consuming Code: then, catch, finally
promise.then(
 result => alert(result), // 2초후 'luka'를 출력
 error => alert(error) // 실행되지 않는다.
);

result라는 파라미터는 promise 가 정상적으로 잘 수행이 되어서

resolve의 'luka'라는 값이 들어온다.

 

즉 then이라는 것은 promise 가 정상적으로 잘 수행이 되어서

resolve라는 콜백 함수를 통해서 전달한 이 값이 result의 파라미터로 전달되어서 값이 들어온다.

 

반대로 promise가 거부된 경우에는 두 번째 에러 함수가 실행된다.

//1.Producing Code
const promise = new Promise((resolve, reject) => {
    //doing some heavy work(network, read files)
    console.log('doing something...');
    setTimeout(() => {
        reject('luka');
    }, 2000);
});

//2.Consuming Code
promise.then(
 result => alert(result), // 실행되지 않는다.
 error => alert(error) // 2초뒤 'luka'를 출력한다.
);

 

다음장에서는 then 이외에도 소비함수에 사용되는 메서드를 알아보려고 한다.