요약

Promise의 콜백 함수 안은 " 동기적 "
. then안의 콜백함수는 " 비동기적 ? 잠깐 제쳐두고... " - 자바스크립트가 다 훑은 다음 처리함

콜백함수

콜백함수를 이용해서 console.log를 순차적으루 실행시켜보자

var a = setTimeout(()=>console.log(2),1000)
var b = setTimeout(()=>console.log(3),2000)
var c = setTimeout(()=>console.log(4),3000)
var d = setTimeout(()=>console.log(5),4000)

function 함수(a){
    console.log(1);
  
}

함수(function(){
    a
    function a(){
        b
        function b(){
            c
            function c(){
                d
            }
            c()
        }
        b()
    }
    a()
})

// 1,2,3,4,5가 찍힌다.

▲ 위 코드를보면 너무 디럽다.

Promise

Promise를 사용하면 좀더 직관적이게 보기 쉬워진다.

promise
.then( function a ( ){ console.log( 2 ) }
.then( function b ( ){ console.log( 3 ) }
.then( function c ( ){ console.log( 4 ) }
.then( function d ( ){ console.log( 5 ) }

▲ 마음이 편안해짐...

이런 식으로 코드를 짜는데 확실히 개념 훑어보자

사용을 해볼까?

var 프로미스  = new Promise ( function ( 성공, 실패 ){
  
  // if 성공하면 성공함수 호출 해서 then을 실행
  성공(구멍1) // 파라미터에 성공 결과 값을 넣어서 the 안에 뿅 넣을 수 있음
  
 // if 실패하면 실패 함수 호출 해서 catch를 실행
  실패 (구멍2) // 파라미터에 실패의 결과 값을 넣어서 catch안에 뿅 넣어 줄 수 있음
}
                         
프로미스                     
.then(function(구멍1){... console.log(구멍1)}) // 성공 함수 호출되면 그 다음 실행 해주세요

.catch(function(구멍2){... console.log(구멍2)}) // 에러뜨면 캐치 함수 호축해서 콜백함수 실행

.finally(function(){...})  // 성공과 실패여부 상관없이 이 코드 실행해주세요

Promise의 콜백 함수의 인자 값에는 성공,실패 라는 두 개의 인자 값이 있는데
메소드(함수)임.

Promise의 콜백 함수 내부에서 조건으로 성공과 실패를 해주면

• 성공 함수를 호출 성공 ( ) 해주고 성공 함수의 파라미터 안에는 성공한
  결과 '값'을 넣어 then의 콜백함수의 인자 값으로 넘겨 줄 수 있다.

• 실패 함수를 호출 실패 ( ) 해주고 실패 함수의 파라미터 안에 실패한
  결과 값을 넣어 catch문의 콜백 함수에 넣어 사용 할 수 있다.

var 프로미스 = new Promise ( function ( resolve, reject) {... }
// 이런식으로 resolve, reject 로 관례적으로 명시 해준다고 함

Promise의 3가지 상태

1. 성공하면 <resolved> = <fulfilled>; // 20231109에서는 fulfilled로 확인됨
2. 판정 대기중이면 <pending>
3. 실패하면 <rejected>

알고 싶으면

console.log 하지 말고, Promise 객체 실행 할 때 브라우저 콘솔 창에 프로미스 변수 쳐보셈

Promise 오해

• 동기를 비동기로 만들어주는 코드가 아님.

• Promise는 비동기적 실행과 전혀 상관이 없음

• Promise 안에 비동기처리하는 setTimeout같은거 쓰면
  비동기처리처럼 하는 거임

그냥 원래 자바스크립트는 평상시엔 동기적으로 실행이 되며 비동기 실행을 지원하는 특수한 함수들 덕분에 가끔 비동기적 실행이 될 뿐

console.log(1)
console.log(2)

Promise((resolve,reject)=>{
    for(let i = 0; i< 1000000; i++){
        console.log(i)
    }
    resolve()
})
.then(()=>{console.log('성공')})

console.log(3)
console.log(4)

1 -> 2-> Promise안의 for문돌림-> 3-> 4-> '성공'

promise안의 for 문을 돌리고 난 후 then 안에 있는 것이 실행 되는 것이 아니라
console의 3 , 4가 찍힌 후 '성공' 이 찍힘

Promise가 적용된 특별한 함수들

• jQquery의 ajax(=promise)
  
• fetch()<- promise를 return 함
  - 먼말이냐면 fetch 함수 실행되면
  promise 가 return 되서
  
  fetch(=promise)
  .then(function(){})
  .catch(function(){}) 이렇게 쓸수 있는거임