[React/JavaScript] Promise 값 가져오기

리엑트로 프론트를 작업하던 중 특정 데이터를 호출하여 띄워주려고 하는데, 

자꾸 에러가 떠 콘솔로 확인을 해보니

이러한 형식으로 데이터가 나온다는 사실을 확인했다.

 

Promise가 무엇인지 여기서 Result에서 데이터만 뽑아낼 수 있는 방법이 무엇인지 적어보고자 한다.

 

1.  Promise 란?

---

Promise는 비동기 작업의 단위 이자 비동기 처리에 사용되는 객체이다.

여기서 비동기 처리란?
특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이다. 
예를 들면, 화면에서 서버로 데이터를 요청했을 때 서버에서 응답을 주지 않는다고 해서 기다리기만 한다면 엄청 오랜 시간을 기다려야 한다. 그리하여 미리 나머지 코드를 실행 후 응답이 오면 실행을 완료해주는 것이다.

-1) Promise의 3가지 상태

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

2. Promise 데이터 추출

---

const data = await StoreApi.requestMap();
function getPromise() {
    promise.then(appData => {
			console.log(appData)
	});
}

 

위와 같이 then을 쓰면 Promise 객체 안의 값을 쓸 수 있지만 꼭 then의 { } 안에서만 사용해야 한다.

그러므로  await으로 해당 값 가져오면 밖에서도 쓸 수 있다.

 

 const setData = async () => {
    const data = await StoreApi.requestMap();
    console.log(data)
  };

이렇게 콘솔을 찍어보면 잘 나오는 것을 확인할 수 있다.

 

 

끝!

---

출처 및 참고 :

https://velog.io/@zzero9158/javascript-promise%EC%9D%98-%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0

[javascript] promise의 값 가져오기

https://blckchainetc.tistory.com/entry/JavaScript-Promise-%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0-async-await-%EC%82%AC%EC%9A%A9

[JavaScript] Promise 값 가져오기 async await 사용