JavaScript _개념정리/비동기_Promise 사용방법 #1/3

# 동기와 비동기

동기식 처리 모델

동기식 프로그래밍은 직렬적으로 일을 처리합니다. 즉 순차적으로 실행 되며 도중에 어떤 작업이 수행 중이면 다음에 일처리해야 될 일들은 대기상태가 됩니다.

 

비동기식 처리 모델

비동기식 프로그래밍은 병렬적으로 일을 처리합니다. 일처리가 종료되지 않은 상태라 하더라도 대기하지 않고 즉시 다음 일들을 실행합니다.

 

 

 

코드로 알아보는 동기와 비동기

console.log(`1`);
setTimeout(() => console.log(`2`), 1000);
console.log(`3`);
 
// Synchronous(동기식) callback
function printImmediately(print) {
  print();
}
printImmediately(() => console.log(`hello`));
 
// Asynchronous(비동기식) callback
function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
 
printWithDelay(() => console.log(`async callback`), 2000);    

콘솔창에서 확인하면서 이해 해보시길 바랍니다.

 

---

# Promise 들어가기전!!! 콜백함수 개념 잡기!!

Promise를 들어가기전 콜백함수에 대한 개념을 이해해야지 Promise에 대한 개념을 좀 더 수월하게 이해 할 수 있습니다. 아래 예제 코드를 콘솔창에서 확인해 봅시다!

 

function test(num , callback){
 callback();
  console.log(num);
}
 
test(1, function(){
  console.log('콜백함수 호출.')
})

# Promise는 왜 사용할까요 ?

Promise는 비동기 처리에 사용되는 object입니다. 또한 Promise는 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 콜백지옥을 해결 할 때도 사용되며 비동기 작업을 좀 더 수월하게 처리 할 수 있도록 ES6에 도입된 기능입니다.

 

$.get('url', function (response) {
    parseValue(response, function (id) {
        auth(id, function (result) {
            display(result, function (text) {
                console.log(text);
            });
        });
    });
});
 

 

위에 있는 코드는 콜백함수를 연달아 쓰는 소위 콜백지옥이라고 부릅니다! 이러한 콜백 지옥을 해결하는 방법에는 Promise난 Async를 사용해서 해결 할 수 있습니다! 그럼 본격적으로 Promise에 대해 알아봅시다! 

 

---

# Promise 

Promise states

Promise는 생성하고 종료될 때까지 3가지 상태를 갖습니다.

 

• Pending(대기)   :  비동기 처리 로직이 아직 안료되지 않은 상태
• Fulfilled(이행)   :  비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패)  :  비동기 처리가 실패하거나 오류가 발생한 상태

 

Promise 기본 개념

Promise는 resolve와 reject를 인자로 가지는 함수로 만듭니다. 이때 resolve와 reject는 콜백함수의 인자 입니다. 내가 원하는 시점을 resolve로 받을수 있으며 그시점을 후속처리 메서드 then()을 이용하여 처리 결과 값을 받을 수 있습니다. 이를 Fulfiled(이행)이라고 합니다. 

 

reject를 호출할 경우에는 실패(Rejected)상태가 됩니다. 이상태를 then()으로도 받을수는 있지만 명확하게 에러 처리를 하기 위해서는 catch()메서드를 사용해 줍니다.

 

• then   :  then메소드는 두개의 콜백함수 인자(resolve,reject)로 전달 받고 Promise를 반환합니다.
• catch  :  catch메서드는 예외 처리 즉 에러가 발생하면 호출되고 Promise를 반환합니다.

아래 예제 코드를 통해 Promise에 대해 좀 더 이해 합시다!! 꼭 콘솔창에 실험을 해야 이해가 쉽습니다!

 

#Promise 만들기

Promise는 new를 사용해서 생성이 가능하고 resolve와 reject를 인자를 가집니다.

 

//Promise 생성 및 기본 구조
 
const joycoding = new Promise((resolve, reject) =>{
  resolve(console.log('프로미스 이행!!!'))
});
 
joycoding.then(()=>{
   console.log("프로미스 실행!!!")
})
 

 

#Promise 데이터 담기

Promise는 resolve인자로 데이터자료를 받을수 있습니다!

 

//Promise 데이터 담기
 
const joycoding = new Promise((resolve, reject) =>{
      let data = "데이터 넣을수 있어염"
    resolve(data)
});
 
joycoding.then((resolveDate)=>{
   console.log(resolveDate)
})
 
// resolve의 결과값 data를 resolveDate로 받습니다!!!

 

//Promise setTimeoust활용
 
const wait2seconds = new Promise((resolve, reject) =>{
  console.log("시작합니다")
  setTimeout(()=>{
    resolve(console.log('2초뒤에 찍는당!!'))
  },2000)
});
 
wait2seconds.then(()=>{
   console.log("프로미스 이행")
})

 

//Promise 에러처리
 
const rejectErr = new Promise((resolve, reject) =>{
  console.log("시작합니다")
  setTimeout(()=>{
    reject('에러걸렸땅!!')
  },2000)
});
 
rejectErr.then(()=>{
   console.log("저는 안찍힙니당")
}).catch((err)=>{
   console.log(err)
})
 

 

#Promise 콜백인자 둘다 활용하기!!!

Promise 인자를 둘다 활용해보는 예제입니다!!! 꼭 콘솔창에서 실험하면서 연습!!!

 

// 콜백인자 둘다 활용해보기!!!
 
const joycoding = new Promise((resolve, reject) => {
  let isTrue = true;
  if (isTrue) {
    resolve(console.log("실행해라"));
  } else {
    reject(console.log("에러입니다"));
  }
});
 
joycoding.then(() => {
  console.log("프로미스 이행완료");
});
 
// false 인경우는 ?
 
const joycoding = new Promise((resolve, reject) => {
  let isTrue = true;
  if (!isTrue) {
    resolve(console.log("실행해라"));
  } else {
    reject(console.log("에러입니다"));
  }
});
joycoding.then(() => {
  console.log("프로미스 이행완료");
}).catch(()=>{
  console.log("리젝트는 에러라구요")
})

 

다음 2편에도 계속....!!