JS Day 12 프로미스

JS Day 12 프로미스

1. Promise

   • 비동기 함수에서 콜백 대신 쓰일 수 있다
   • Promise 객체를 생성하는 Producer와 그것을 사용하는 Consumer로 나뉜다

   // Producer
      
   const promise = new Promise((resolve, reject) => {
       //이 곳에서 네트워크 통신, 파일 로딩 등 비동기 로직을 작성
       resolve(value); // 성공하였을 경우 value 전달
       reject(error); // 실패하였을 경우 error 전달 
   })
   

   • new Promise에 전달되는 함수는 executor 실행 함수라고 부른다
   • executor는 new Promise가 만들어질 때 자동 실행된다
   • executor의 인수 resolve, reject는 자바스크립트가 자체적으로 제공하는 콜백
   • promise 객체는 state 변화를 갖는다
   • 처음엔 pending(보류) 였다가 resolve가 호출되면 fulfilled, reject가 호출되면 rejected
   • Promise 객체를 직접 정의면 생성되는 순간 executor가 실행되므로 이벤트 스케쥴링이 어렵다. 그리고 불필요한 네트워크 통신을 야기할 수 있다

   // Consumer
      
   promise.then(value => {
       // promise의 resolve가 전달한 값을 value로 받는다
   })
     .catch(error => {
       // 실패하면 reject의 error가 전달된다
   })
     .finally(() => ); //성공하든 실패하든 수행된다
   

   • finally에는 인수가 없다

   
   

2. Promise Chaining

   • promise를 연결하여 사용할 수 있다

   promise.then(num => num * 2)
   	//  .catch(error => )
   		.then(num => num * 3)
       //  .catch(error => )
   		.then(num => {
       		return new Promise((resolve, reject) => {
                   // 프로미스 안에서 또 프로미스 호출이 가능하다
           }});
   

   • 각각의 then 사이에 catch를 넣어서 예외 처리를 할 수 있다

   
   

3. fetch와 promise

   • 자바스크립트 내장 모듈인 fetch와 promise는 뗄 수 없는 관계이다
   • fetch로 네트워크 요청을 하면 반환 값으로 promise를 받기 때문

   fetch(url)
   	.then(response => response.json()) // 받아온 JSON을 파싱한다
   	.then(value => alert(value.name))
   	.catch(error => alert(error))
   

참고 자료

JAVASCRIPT.INFO

드림코딩 by 엘리