promise

• 비동기 함수를 동기 처리하기 위해 만들어진 객체

  비동기란?
  특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 JS의 특성

• 성공과 실패를 분리하여 반환 ➜ fulfilled 혹은 rejected

• 비동기 작업이 완료된 이후에 다음 작업을 연결시켜 진행할 수 있는 기능을 가짐

promise의 상태

• pending(대기) : promise를 수행 중인 상태
• fulfilled(이행) : resolve(성공)된 상태
• rejectde(거부) : reject(실패)된 상태
• setteled : fulfilled 혹은 rejected로 결론이 난 상태
  

promise 사용법

promise 안에 resolve와 reject두 상황에 대한 callback함수

//promise 객체
function promise(flag) {
  return new Promise(function (resolve, reject) {
    if (flag) {
      resolve('promise상태는 fulfilled, then으로 연결');
    } else {
      reject('promise상태는 reject, catch로 연결');
    }
  });
}

promise(true)
  .then(function (result) {
  console.log(result); 
})
  .catch(function (result) {
  console.log(result);
});

[결과]

---

promise(false)
  .then(function (result) {
  console.log(result); 
})
  .catch(function (result) {
  console.log(result);
});

[결과]

---

실습. callback 함수를 promise 객체로 바꿔 체이닝 하기
callback 함수

function call(name, cb) {
  setTimeout(() => {
    console.log(name);
    cb(name);
  }, 3000);
}
function back(cb) {
  setTimeout(() => {
    console.log('back');
    cb('back');
  }, 3000);
}
function hell(cb) {
  setTimeout(() => {
    console.log('hell');
    cb('callback hell');
  }, 3000);
}
call('kim', (name) => {
  console.log('반가워', name);
  back((txt) => {
    console.log(txt, '함수 시작');
    hell((message) => {
      console.log(message, '다.');
    });
  });
});
            

promise객체

    
function call(name) {
  return new Promise((resolve) => {
    console.log(name);
    resolve(`${name}반가워`);
  });
}
function back() {
  return new Promise((resolve) => {
    console.log('back');
    resolve('back 함수');
  });
}
function hell() {
  return new Promise((resolve) => {
    console.log('hell');
    resolve('callback hell');
  });
}
call('kim')
  .then((result) => {
  console.log(result);
  return back();
})
  .then((result) => {
  console.log(result);
  return hell();
})
  .then((result) => {
  console.log(result);
});

[결과]

---

Async / Await

• promise도 chaining을 반복하면 코드의 가독성이 떨어진다.
• 그래서 보다 직관적인 코드를 작성하기 위해서 등장
• 기능이 추가된 것이 아닌, promise를 다르게 사용하는 것
• promise 기반 코드를 좀 더 쓰기 쉽고 읽기 쉽게 하기 위해 등장
• 비동기 처리 패던 중 가장 최근에 나온 문법

async
함수 앞에 붙여 promise를 반환하는데 promise가 아닌 값을 반환해도 promise로 감싸서 반환한다.
await
promise 앞에 붙여 promise가 다 처리될 때까지 기다리는 역할로 결과는 그 후에 반환한다.

promise객체

function goMart() {
  console.log('마트에 가서 어떤 음료를 살지 고민한다.');
}
function pickDrink() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log('고민끝');
      product = '제로콜라';
      price = 3000;
      resolve();
    }, 3000);
  });
}
let product;
let price;
goMart();
pickDrink().then(() => {
  console.log(`상품명 : ${product} 가격 : ${price}`);
});

위와 같이 promise 객체로 동기 처리한 코드를 async, await 구문으로 바꿔주면

function goMart() {
  console.log('마트에 가서 어떤 음료를 살지 고민한다.');
}
function pickDrink() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log('고민끝');
      product = '제로콜라';
      price = 3000;
      resolve();
    }, 3000);
  });
}
function pay(pick) {
  console.log(`상품명 : ${product} \n가격 : ${price}`);
}
async function exec() {
  goMart();
  await pickDrink();
  pay();
}
let product;
let price;
exec();