[kmhdev] promise ? 비동기함수

비동기 함수하면 가장 먼저 떠오르는 promise, async await 함수에 대해 정리하려한다.

 

Promise 는 보통 비동기 함수, 연산등의 처리가 끝난후에 실행하도록 명시하기 위해 객체이다.

 

Promise 는 보통 3가지의 상태를 가집니다.

대기(pending) - 이행(fulfilled)

                     거부(rejected)

 

대기(pending)은 말그대로 아직 함수가 이행되기전 입니다. 쉽게 말해서 new Promise(res, rej) 라 선언하면 대기 상태에 들어가는겁니다.

 

이행(fulfilled)는 말그대로 연산이 성공하였다 입니다.

거부(rejected)는 말그대로 연산이 실패하였다 입니다.

 

이행, 거부에 관해서는 한가지 더 설명 드려야 하는것이 있습니다.
 Promise를 사용할떄에는 보통 익명함수를 파라미터로 집어넣습니다.

아래 코드가 그 예제입니다.

 

var myPromiseF = new Promise( (resolve, reject) => {  
  setTimeout(function(){
    resolve("hi!"); 
  }, 250);
});
myPromiseF.then((successMessage) => {
  console.log("Was Kim(my cat) " + successMessage);
});
console.log("what?");

 

Promise는  익명함수를 파라미터로 입력받아 실행됩니다.

또한 해당 익명함수는 resolve,  reject를 파라미터로 가질수 있습니다.

해당 변수명은 임의로 주셔도됩니다.

앞에서부터 순서대로 용도에 맞게 사용하시면 되니깐요

 

첫번쨰 resolve 해당 파라미터는 내부 로직에서 resolve("hi")라는 함수로 사용했습니다.

 

위에서 이야기한 이행 상태로 가기위해서는 이 resolve를 사용하는것이죠.

또한 용도가 한가지 더있습니다.

바로 아래에 myPromiseF.then( (successMessage) => {});

then() 함수 파라미터로 들어가있는 (successMessage) => {} 익명함수를 호출하는것입니다.
즉 resolve('hi') == (successMessage) => {}(); 가 되겠네요.

 

그럼 reject는 무엇이냐

남은것은 하나입니다 거부(rejected)로 가기위한 상태이지요

거부당하면 말그대로 then을 실행하지 않게되며 해당 로직은  Uncaught (in promise) hi! 라는 에러를 맞이하게 될것입니다.

 

그럼 이 긴 글을 제치고 왜 Promise를 쓰냐?

 

쉽게 풀면 Promise는 내가 자동으로 움직이는 무인비행기를 만들껍니다

그런데 비행기에 이동 데이터를 집어넣기 전에 이륙하면 경로를 못찾아 문제가 생기겟죠

그래서 반드시 데이터주입() -> 이륙() 함수 순서로 태워야합니다.

데이터 주입();

이륙();

이런식으로 작성하면 무조건 데이터 주입()이 끝나고 이륙함수가 탈까요?

아닙니다.

정해진 순서대로 실행될수도 있지만 만약 데이터 주입 함수에 setTimeout과 같은 비동기 함수가 섞여있다면?

그렇다면 데이터주입()이 진행되는동안 이륙()함수가 실행될 수 있습니다.

 

이런 순서가 무조건 정해져야 하는 경우에 Promise를 사용합니다

 

그런데 Promise 계속 익명함수를 집어넣는다 생각하면 무척 코드가 더러워진다 생각이 드시고 복잡해 보일껍니다.

또한 Promise() then()을 한번만에 끝나면 좋겟지만 여러 함수가 계속 물고 물리고 늘어지는 형태가 될수 있습니다.

 

그럴떄 정말 더럽죠...

그렇기에 async await 함수가 등장한것입니다.

이건 추후에 다시 정리하겠습니다.