Promise 이해하기

Promise 클래스를 사용하려면 일단 new연산자를 적용해 프로미스 객체를 만들어야 합니다. 그리고 프로미스 객체를 만들 때 콜백함수를 제공해야 합니다.

const promise = new Promise(콜백함수)

여기서 Promise의 콜백 함수는 resolve와 reject라는 두개의 매개변수를 가집니다.

(resolve, reject) =>{}

타입스크립트에서 Promise는 제네릭 클래스 형태로 사용합니다.

const numPromise: Promise< number > = new Promise< number >(콜백함수)
const strPromise: Promise< number[] > = new Promise<number[]>

타입스크립트 Promise의 콜백함수는 다음처럼 resolve와 reject함수를 매개변수로 받는 형태입니다.

 new Promise< T >((
	resolve: (sucessValue: T) => void
    reject:(any) => void
) =>{
	//코드구현
})

Promise resolve 메서드

Promise.resolve(값) 형태로 호출하면 항상 이 "값"은 then메서드에서 얻을 수 있습니다.

Promise.resolve(1)
  .then(value => console.log(value))

Promise.resolve("Hello")
  .then(value => console.log(value))

Promise.resolve([1, 2, 3, 5])
  .then(value => console.log(value))

Promise.resolve({name: "Jack", age:32})
  .then(value => console.log(value))

Promise.reject 메서드

Promise.reject(Error 타입객체)를 호출하면 항상 catch메서드의 콜백 함수에서 얻을 수 있습니다.

Promise.reject(new Error("에러 발생"))
.catch((err: Error)=> console.log("error", err.message))

then 체인

Promise의 then 인스턴스 메서드를 호출할 때 사용한 콜백 함수는 값을 반환할 수 있습니다. 이 then에서 반환된 값은 또 다른 then메서드를 호출해 값을 수신할 수 있습니다.

반환된 값이 Promise타입이면 resolve값을 반환하고 reject값일 경우에는 catch메서드에서 거절당한 값을 얻을 수 있습니다.

Promise.resolve(1)
  .then((value: number) =>{
    console.log(value)
    return(Promise.resolve(true))
  }).then((value:boolean) =>{
    console.log(value)
    return([1,2,3])
  }).then((value:number[])=>{
    console.log(value)
    return(["Kim", "Doyoon"])
  }).then((value:string[])=>{
    console.log(value)
    return({name: "junseong", age:23})
  }).then((value: {name: string, age:number})=>{
    console.log(value)
  })

Promise.all 메서드

every메서드는 배열의 모든아이템이 어떤 조건을 만족하면 true를 반환합니다.

const isAllTrue = (values: boolean[]) =>
  values.every((value =>value ==true))


console.log(
  isAllTrue([true, true, true]),
  isAllTrue([false, true, true])
)

Promise클래스는 every처럼 동작하는 all이라는 이름의 클래스 메서드를 제공합니다.

all(프로미스 객체 배열:Promise[]): Promise<해소된 값들의 배열(or any)>

Promise.all 메서드는 Promise객체들을 배열 형태로 받아, 모든 객체를 대상으로 resolve된 값들의 배열로 만들어 줍니다.(then, catch사용)

const getAllResolvedResult = <T>(promises: Promise<T>[]) => Promise.all(promises)

getAllResolvedResult<any>([Promise.resolve(true), Promise.resolve("hello")])
  .then(result => console.log(result)) // [ true,  "hello" ]

  getAllResolvedResult<any>([Promise.reject(new Error("error")), Promise.resolve(1)])
    .then(result => console.log(result))
    .catch(error => console.log('error:', error.message)) // error: error

Promise.race 메서드

Array클래스는 배열의 내용중 하나라도 조건을 만족하면 true를 반환하는 some인스턴스

const isAnyTrue = (values: boolean[]) => values.some((value => value == true))

console.log(
  isAnyTrue([false, true, false]),
  isAnyTrue([false, false, false])
)

Promise.race 메서드는 배열에 담긴 프로미스 객체중 하나라도 resolve되면 이 값을 담은 Promise.resolve 객체를 반환합니다.
거절값이면 Promise.reject객체를 반환합니다.

race(프로미스 객체 배열: Promise[]):Promise<가장먼저 해소된 객체의 값 타입(혹은 error)>

ex

Promise.race([Promise.resolve(true), Promise.resolve("hello")])
  .then(value => console.log(value)) // true

Promise.race([Promise.resolve(true), Promise.reject(new Error("hello"))])
  .then(value => console.log(value)) // true
  .catch(error => console.log(error.message)) // 호출되지 않습니다

Promise.race([Promise.reject(new Error("error")), Promise.resolve(true)])
  .then(value => console.log(value)) // 호출되지 않습니다
  .catch(error => console.log(error.message)) // error

Promise는 비동기 Api사용에서 나타나는 콜백지옥 형태의 코드를 어느정도 관리할 수 있는 형태로 바꿔줍니다.