Promise / async, await 맛보기

1/ Promise 맛보기

 

1- Promise의 목적

콜백 기능을 그대로 하되 코드를 조금 더 깔끔하게 만들어준다.

 

 

2- Promise 사용법

Promise 는 객체라는 게 포인트

 

지난번에 다뤘던 객체틀(붕어빵틀) 만들고 객체들(붕어빵)을 복사했던거를 복습해보면,

새로운 객체를 복사, 찍어낼 때 new라는 생성자를 썼었다. 

 

// 객체들을 찍어내는 틀을 만드는 방법1 (함수 쓰기)

function person(name,job){
	this.name = name;
	this.job = job;
}

// 객체들을 찍어내는 틀을 만드는 방법2 (class-constructor 쓰기)

class person{
	constructor(name,job){
	this.name = name
	this.job = job
    }
}

// person이라는 붕어빵틀을 이용하고 + new라는 생성자 사용하여 새로운 객체들 생성함

let 짱구 = new person('짱구','유치원생')
let 코난 = new person('코난','탐정')
let 후추 = new person('후추','고양이')

console.log(짱구,코난,후추)

 

즉, Promise도 객체니까 새로운 Promise 객체를 찍어내기 위해  new 라는 키워드를 앞에 붙여준다. 
Promise 객체의 인자값으로는 callback함수가 들어간다.

 

이 콜백함수는 2가지의 매개변수를 가진다.  resolve() 와 reject()  

 

new Promise((resolve,reject)=>{
	resolve()
	reject()
})

 

이 두 매개변수는 함수이다!

resolve => 성공에 대한 부분을 넣는다.

reject => 실패에 대한 부분을 넣는다.

 

 

우선, 연습삼아

resolve함수에 OK라는 text를 넣어주고, new Promise 자체가 객체니까 변수에 담고 출력해보자.

 

let pr = new Promise((resolve,reject)=>{
		resolve('OK')
		reject()
	})

console.log(pr)

 

OK라는 text를 담은 Promise라는 객체가 나온다.

 

근데, 저 OK라는 텍스트를 객체 밖으로 빼내고싶다면?

그 방법이 조금 특이하다.

.then이라는 메소드를 사용한다.

 

이 메소드에는 또 콜백함수가 인자로 들어간다.

이때, 콜백함수의 인자로 넣은 data는 Promise객체의 resolve의 인자를 가져 온 것이다. 

지금 예시로는 data === 'OK'

 

pr.then((data)=>{
	console.log(data)
})

 

 

3 - Promise의 상태?!

 

브라우저 콘솔창에 찍어보면, 아래와 같이 Promise라는 특이한 객체가 등장한다.

대표적으로 then / catch / finally 라는 메소드를 가지고 있는 걸 알 수 있다.  

 

이때, resolve('OK') =>  'OK'라는 인자값을 넣어두었기에

이행상태, fulfilled 로 출력됨과 동시에 PromiseResult가 그 인자값을 가져오는 걸 확인할 수 있다! 

 

<fulfilled>

 

하지만, resolve에 아무것도 안넣으면 resolve( ) ? undefined로 나온다. 

 

<reject>

reject : 예외상황을 처리할 때 / 통신 다룰 때 쓰는거라 우선 냅두고 다음번에 배우자

 

 

<pending>

resolve,reject 자체를 넣지 않는다면? 

 

let pr = new Promise((resolve,reject)=>{
})
console.log(pr)

 

pending 상태의 Promise객체가 출력된다.

 

또한,

Promise안에 비동기 코드를 넣어두고 그 안에 resolve를 넣고 pr을 출력하면, pending 상태로 뜬다.

 

4 - Promise 연습해보기

 

콜백함수 때 썼던 예제를 가져와서 promise로 바꾼 상태

Promise객체를 리턴해주는 arrow함수를 각 변수에 담아주는 형태

 

const Avante = () => {
    return new Promise((resolve,reject)=>{
        console.log('아반떼 출발')
        setTimeout(()=>{
            resolve('아반떼 도착')
        },time())
    })
}

const Sonata = () => {
    return new Promise((resolve,reject)=>{
        console.log('소나타 출발')
        setTimeout(()=>{
            resolve('소나타 도착')
        },time())
    })
}

const Genesis = () => {
    return new Promise((resolve,reject)=>{
        console.log('제네시스 출발')
        setTimeout(()=>{
            resolve('제네시스 도착')
        },time())
    })
}

 

이제 결과물을 출력하려면, .then을 써야한다.

.then()을 하면 앞에 있는 함수의 return값을 가지고 출력을 한다. 즉, chaining이 된다.

 

Avante()
.then(data => {
    console.log(data)
    return Sonata()
})
// 아반떼 출발, 아반떼 도착 출력해내고 sonata() 를 리턴함

// sonata()에 .then 메소드를 쓰는 격임(chaining)!
.then(data => {
    console.log(data)
    return Genesis()
})
// 소나타 출발, 소나타 도착 출력해내고 genesis() 를 리턴함

// genesis()에 .then 메소드를 쓰는 격임(chaining)!
.then(data => {
    console.log(data)
})
// 제네시스 출발, 제네시스 도착 출력하고 끝!

 

 

2/ async & await 맛보기

async 는 간단하게 말하자면, promise 객체를 만들어주는 역할을 한다.

앞에 async를 달면 promise객체를 return 해주는 것

 

await를 붙이면 이 프로미스 객체가 끝나기 전까지는 다음 차례는 실행하지 않겠다, 끝날때까지 기다리겠다~ 라는 뜻 

즉, await는 무조건 promise객체에만 쓰인다!

 

확실히 .then으로 엮는 것보다 async 와 await를 쓰니까 좀 더 깔끔하고 직관적인것 같다.

 

async function init(){
    let a = await Avante() // avante() 다 출력되기전까지 기다리셈
    console.log(a)
    let b = await Sonata() // sonata() 다 출력되기전까지 기다리셈
    console.log(b)
    let c = await Genesis() // genesis()가 다 출력되면 끝!
    console.log(c)
    
}
init()