promise

지난번에 openapi에서 받아온 데이터

promise 객체에 대해 알아보자

promise 는 비동기적으로 동작시켜줘야함.

openapi를 통해서 받아오는 데이터는 자바스크립트로 해당 내용을 실행 해야 데이터를 받아올 수 있기 때문에 자바스크립트가 실행되기 전에 받아올수는 없음.

패치 요청도 비동기 함수 이기 때문에 콜백 큐에 들어감.

const openWeatherRes = fetch(`https://api.openweathermap.org/data/3.0/onecall?lat=${position.latitude}&lon=${position.longitude}&appid=${apiKey}`);
console.log(openWeatherRes);

이런식으로 동작시키면
console.log가 먼저 콜스택에 들어가버리게됨 ( 즉 데이터를 받아오기 전에 출력을 하려고함 )
그래서
아직 데이터를 받아오지 못했지만 언젠가 데이터를 보내줄게 라고 약속-promise 하는것
언젠가는 돌려받을 데이터인데 아직 응답받지 못했다는 의미의 promise 객체
또한 promise 객체는 3개의 상태를 가짐

• fulfilled : 요청이 성공한 상태
• pending : 요청에 대한 응답을 기다리고 있는 상태
• rejected : 요청이 실패한 상태

promise 객체 직접 만들어보기

promise 객체를 통신을 통하지 않고 만들어보자

const promiseTest = function () {
  return new Promise();
}

new Promise() 를 사용하면 promise 객체를 만들 수 있음.

const promiseTest = function () {
  return new Promise((resolver, reject) => {
    resolver(100);
  });
}

console.log(promiseTest());

resolver, reject 매개변수를 받아올 수 있음 - 콜백함수
resolver 를 실행해주면 fulfilled 성공으로 응답을 받아옴
소괄호 안의 데이터(100)가 응답으로 담겨져 가게됨

const promiseTest = function () {
  return new Promise((resolver, reject) => {
    setTimeout(() => {
    	resolver(100);
  	}, 2000);
  });
}

console.log(promiseTest());

2초간 resolver 실행 대기를 시켜주면 펜딩 상태가 됨. ( 요청에 대한 응답을 기다리고 있는 상태)

2초동안 대기시켜서 응답을 못받았음

const promiseTest = function () {
  return new Promise((resolver, reject) => {
    setTimeout(() => {
    	resolver(100);
  	}, 2000);
  });
}

console.log(promiseTest().then());

then을 해주면 fulfilled가 될때까지 기다려줌.
then도 콜백 함수를 넣어줄 수 있음

const promiseTest = function () {
  return new Promise((resolver, reject) => {
    setTimeout(() => {
    	resolver(100);
  	}, 2000);
  });
}

promiseTest().then((res) => {
  console.log(res);	
}

100이라는 probise가 resolver 하는 데이터를 받아올 수 있음

또한

const promiseTest = function () {
    return new Promise((resolver, reject) => {
      setTimeout(() => {
          reject('error');
        }, 2000);
    });
  }

  console.log(promiseTest())

reject 로 실행을 하면

에러 내용을 전달할 수 있다.