TIL-211121.md

👊 Today

어쩌다보니 오늘 비동기 Promise를 다시 공부하게 되었다. 전부 다 까먹어서 작성하는것도 꽤나 생소했다. 그치만 저번 달에 공부할때는 시간이 엄~청 걸렸던 기억이 나는데 오늘은 꽤나 줄어든 시간으로 공부를 했다. 내가 발전한건지 매번 '모르겠다 모르겠다' 하다가도 이럴때 '발전했구나'싶다.

👊 Promise

Promise는 자바스크립트의 object이다.

• 프로미스인스턴스 쓰자마자 실행 (함수에 담긴 프로미스는 쓰자마자 실행 ❌ , 함수를 실행해야 실행된다)(->당연한건데 왜 헷갈린거지,,?🥲 쓰다보니까 바보된기분이다 그치만 미래의 나는 또 잊고 있을테니 적자..)

const promise = new Promise((resolve,reject) => {
	console.log("리로드하자마자 바로 출력됩니다.")
    //실행은 resolve // 에러는 reject
})
> 
const getHen = () => 
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`🐓`),1000)
        console.log("실행 버튼 눌러야 실행됨")
 }

에러는 .catch로 잡고 .finally는 성공,실패여부와 상관없이 코드가 진행된다.

Promise 체이닝에서 .then은 값을 바로 전달할 수 있고, 프로미스를 전달할 수 있다.

fetchNumber
.then(num => num * 3)
.then(num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(num-1), 1000)
    })
})

👊 오늘 Promise 공부한 코드 예제

개인적인 노트필기라 말투도 지저분하고 설명도 내가 알아보고 이해하기 편하게 되어있다.

'use strict'


//프로미스는 자바스크립트 오브젝트이다.

// 1. Producer
// when new Promise is created, the executor runs automatically/
const promise = new Promise((resolve,reject) => {
    //doing some heavy work(network, read files)
    console.log("doing something...")
    // 콘솔로그 확인해보면 프로미스 인스턴스 만들자마자 콘솔로그가 실행됨을 볼 수 있다.
    // 즉 프로미스인스턴스 안 콜백함수 resolve,reject  가 바로 실행
    // 그러므로 여기 프로미스인스턴스 안에다가 뭐라도 하나 넣으면 바로 실행됨을 알 수 있다.
    // 따라서 여기를 참 중요시 여겨야함. 왜냐하면 불필요한 네트워크가 실행될 수 있으니까


    setTimeout(() => {
      // resolve 호출
        /* resolve(() => {console.log("elle")
        return elle
    }); */
        resolve('elle')
      //reject(new Error("no network"))
       
    }, 2000)
});

// 2. Consumers: then, catch, finally
promise.then(data => {
    console.log(`soyoung and ${data}`)
})

// reject인 경우 .catch를 이용하여 에러를 처리해준다.
.catch(error => {
    console.log(error)
})
// finally는 성공실패상관없이 무조건 그냥 실행됨
.finally(() => {
    console.log('finally')
})

// 3. Promise chaining

const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000)
})


fetchNumber
.then(num => num * 2) // then은 값을 바로 전달해도 되고 promise를 전달해도 된다.
.then(num => num * 3)
.then(num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(num-1), 1000)
    })
})
.then(num => console.log(num))

// Error Handling
const getHen = () => 
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`🐓`),1000)
        console.log("dd")
    })
const getEgg = (hen) => 
    new Promise((resolve, reject) => {
        setTimeout(() => {
            return reject(new Error(`error : ${hen} => 🥚`))
            /* resolve(`${hen} => 🥚`) */
        },1000)
    })
const cook = (egg) => 
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${egg} => 🍳`),1000)
    })  
// 79-82열 생략버전    
getHen()
.then(getEgg)
// .catch(error => {return '👌'})
.then(cook)
.then((result) => console.log(result))
.finally(() => console.log(`성공,실패여부와 상관없이 나왔어용~ finally~`))

// getHen() // getHen()의 resolve값이 hen파라미터로 가는것임
// .then(hen => getEgg(hen))
// .then(egg => cook(egg))
// .then(meal => console.log(meal))


// 60열과의 차이를 느껴보자 87-89열은 콘솔로그 찍으면 바로 나오는 반면 60열은 그렇지 못하다. 
// 그 이유를 생각을 해보면 알 수 있다. 60열은 qwert함수안의 new Promise이기 때문이다. 
const sdf = new Promise((resolve,reject) => {
    console.log("hihihi")
})

const qwert = function(){
    new Promise((resolve, reject) => {
        resolve(console.log('🙂'))
    })
}
qwert()