210929 TIL

TIL DAY 61

오늘 배운 일

✔️ 코드잇에서 JavaScript 중급

> 직접 만들어보는 Promise 객체

간단한 예 )

• Promise 객체를 직접 생성하는 코드이다.

• new를 붙이면 객체를 새롭게 생성이 가능하다!

• 중요한 부분은 파라미터로 들어간 함수!

  Promise 객체가 실행될때, 자동으로 동작한다.
  안의 함수를 executor 함수라고도 칭한다.

첫번째 파라미터

resolve 파라미터는 생성될 promise 객체를 fulfilled 상태로 만들 수 있는 함수가 연결된다.

두번째 파라미터

reject 파라미터는 생성될 promise 객체를 rejected 상태로 만들수 있는 함수로 연결이된다.

예 ) setTimeout함수를 써서 2초후에 resolve 파라미터로 연결된 함수를 실행할 때...

결과값 :

• 약 2초후에 success문자가 잘출력되었다.
• promise 객체가 fulfilled 상태로 되었고, 그리하여 then메소드 안의 콜백이 실행되었다.

예 ) setTimeout함수를 써서 2초후에 reject 파라미터로 연결된 함수를 실행할 때...

결과값 :

• reject함수는 생성되는 promise 객체를 rejected 상태로 만든다.
• reject함수에 아규먼트가 작업 실패정보로 된다.

• all 메소드

  • 여러 개의 Promise 객체를 다뤄야 할 때 사용한다.

  • all 메소드도 then 메소드처럼 새로운 Promise 객체를 리턴한다.

    예 )

    

    결과값 :

    

    all 메소드는 아규먼트로 들어온 배열에 있는 모든 Promise 객체가 pending 상태에서 fulfilled 상태가 될 때까지 기다립니다.

    만약에 fetch함수 안에 문제가 있다면..

    

    위에 코드를 잘보면 3번째 fetch함수의 url이 조금 이상합니다

    결과값 :

    • catch 메소드를 이용해서 에러를 알아낸다.

    

• race 메소드

  • all 메소드와 마찬가지로 여러 Promise 객체들이 있는 배열을 아규먼트로 받는다.

  • all 메소드처럼 promise 객체를 리턴한다.

  • 여러 Promise 객체들을 race(경쟁)시켜서 가장 빨리 상태가 결정된 Promise 객체를 선택하는 메소드

    간단한 예 )

    

    fullfilled되는 함수를 가장 빠르게 조절해뒀다. 결과는...

    결과값 :

    • 1초후에 success가 출력이된다.
    • 가장 먼저

    

    그러면 이번에는 rejected를 해보면...

    

    위에 코드를 자세히보면, fulfilled 상태가 되는 함수는 6초로 조절해두고, 가장 빠른 2초후가 출력이될것이다.

    결과값 :

    

마지막으로 느낀점 :

• 오늘은 직접 promise 객체를 만들어보고, 새로운 메소드인 all과 race에 대해 배우는 시간을 가졌습니다.
• 늘 느끼는거지만 이렇게나 메소드가 많으니까 자꾸 헷갈리게 된다.
• 하나하나 잘 확인해서 쓰는게 옳은 방향인 것 같다.