[TIL] JavaScript Promise

📌 Promise에 대해 공부하기 전에 알아야할 개념

1. 자바스크립트는 동기적(synchronous)이다.

💡 동기적: 호이스팅이 된 후부터 코드가 하나씩 작성된 순서에 맞게 실행됨.
💡 호이스팅: var, function declaration 등이 자동적으로 제일 위로 올라가는 것

2. 비동기적(asyncronous): 특정 코드가 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행하는 것

💡 프로미스는 비동기를 간편하게 처리할 수 있게 해주는 객체

💡 그동안 자바스크립트는 비동기 처리를 위해 콜백을 사용해왔는데, 콜백을 중첩시키면서 에러와 예외처리가 어려웠고, 복잡도가 증가하는 문제가 있었다.

📌 Promise는 언제 사용할까?

⌚ 시간이 걸리는 작업

ex. 서버에서 데이터 요청하고 받아올 때, 파일을 읽어들일 때 등등

📌 Promise 어떻게 사용할까? -> promise 의 3가지 상태

1. Pending ⌚

💡 대기상태. 비동기 처리가 완료되지 않음
new Promise();
new Promise((resolve, reject)=>{});

new Promise가 만들어지면 자동적으로 executor 함수가 실행됨. executor의 인수는 resolve(성공한 경우 실행)와 reject(실패한 경우 실행)로,
💡 반드시 resolve 또는 reject 중에 하나를 호출해야함

2. Fulfilled 😊

💡 이행상태. 비동기 처리 완료됨. 프로미스가 결과값 반환해준 상태.
new Promise((resolve, reject)=>{resolve()});

3. Rejected 😫

💡 실패상태. 비동기 처리 실패 or 오류발생
new Promise((resolve, reject)=>{reject()});
-> reject는 Error 오브젝트를 전달하는데 .catch() 로 실패 이유 찾을 수 있음.

📌 예시

const fakeRequest = url => {
  return new Promise((resolve, reject) => {
    const randomNumber = Math.random()
    setTimeout(()=> {
      if(randomNumber < 0.6) {
        resolve('21 Young Designers to watch in 2021')
      } reject('Request error!')
    }, 2000)
  })
}

fakeRequest('/editors/1')
	.then(data => {
  		console.log('Feature Stories :', data)
	})
	.catch(error => {
  		console.log(error)
	})