[🌳javascript] Promise

Promise

콜백함수처럼 차례대로 순서를 보장해주는데, 코드도 훨씬 보기 좋고, 기능도 좀 더 제공이 되는 녀석. 일단 만드는 법부터 알아보자.

const 프로미스 = new Promise()

이러면 프로미스 생성!프로미스를 새로 하나 만들고나면 이제 그 다음에 실행할 코드를 .then이라고 쓰고 () 안에 적어주면 된다.

프로미스.then()

만약 프로미스가 실패할 경우에는 .catch라고 쓰고 () 안에 적어주면 된다.
이전에 봤던 콜백은 1번, 2번 이렇게 순서만 보장해줄 수 있었던 것과 달리, 프로미스는 순서뿐만 아니라 실패했을 경우에 실행될 것까지 제공해주기 때문에 굉장히 혁명적인 사건이라 볼 수 있다. (심지어 성공/실패와 관계없이 실행되는 finally도 있음)

프로미스가 성공/실패하는 것의 판정여부는 new Promise()안에 콜백함수로 넣어주면 된다.

const 프로미스 = new Promise(function(resolve,reject){
  const 어려운연산=1+1
  성공() // 무조건 성공하게 만듦 
})

또한, 프로미스는 콜백과 달리 결과를 값으로 받아서 저장할 수 있다. 결과 그 자체를 값으로 받기에, 연속으로 실행하는 코드에서는 callback보다 가독성 있는 코드가 가능하다.

const 프로미스 = new Promise(function(resolve,reject){
  const 어려운연산=1+1
  성공(어려운연산)
})

프로미스
  .then(function(결과){console.log(결과)}) // 콘솔에 2가 찍힘
  .catch(function(){console.log('실패')})

주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
정해진 기능을 수행하고 나서 결과에 따라 성공이나 실패에 대한 정보를 리턴한다

Pending

대기: 비동기 처리 로직이 아직 완료되지 않은 상태

Fulfilled

이행: 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

Rejected

실패: 비동기 처리가 실패하거나 오류가 발생한 상태

연습문제

const greeting = new Promise(function (res, rej) {
  $.get("https://hello.txt").done(function (결과) {
    res(결과);
  });
});
greeting
  .then(function (결과) {
    const 프로미스3 = new Promise(function (res, rej) {
      $.get("https://hello2.txt").done(function (결과2) {
        res(결과2);
      });
    });
    return 프로미스3;
  })
  .then((결과2) => {
    console.log(결과2);
  });

ajax를 이용해 인삿말을 출력하는 연습문제를 풀어보았다.
내가 헷갈렸던 거는 return을 어디서 하는 것인가 였다. 함수가 워낙 겹쳐있으니 보기 어려웠는데, 결론적으로 내가 return 하고 싶었던 프로미스3는 Promise로 만든 거가 다 끝난 다음에 리턴해야 했다.
그리고 .then((결과2)을 프로미스3.then 이렇게 써서 에러가 났다. const 프로미스3는 블록레벨 스코프니까 당연히 {}안에서밖에 못 찾는다. 프로미스3으로 찾을 게 아니라 앞의 Promise 자체로 .then()을 연결해야 했다.

• 오늘 새롭게 알게 된 것
  Promise에 대해 배웠다. resolve,reject를 인자로 갖는 콜백함수를 써서 성공/실패 판정을 내릴 수 있다. 성공/실패에 맞춰 then/catch를 사용해 코드를 실행할 수 있다.
• 오늘 배운 것들 중 궁금하거나 더 알고 싶은 것
  자 이제 async/await 공부하러 가야지
• 오늘의 소감
  콜백지옥보다는 나은 것 같은데 익숙해지기 위해 노력해야겠다.