[Error]비동기로 api 호출 후 결과 받아오기(NaN 에러)

서버 api로 login이 잘 되었는지 확인하기 위해

쿠키에 저장된 jwt 값을 decoding하여 userId 값을 받아오는 과정을 수행 중이었다.

기대값은 userId 값인 (Number) 3 

출력값은 자꾸 NaN 이 떴다.

 

백엔드에서 userId를 추출할 때는 문제가 없는데, 프론트로 반환값을 가져올 때 자꾸 NaN 에러가 뜨는 걸로 보였다.

- response 그대로 출력해보면 response data는 뜨지만 값이 안뜬다.

console.log(response);

- Response.text()로 출력하면 Promise 객체 값이 나온다.

console.log(response.text());

내가 원하는 것은 맨 아래 있는 3인데 자꾸 저 안에 들어가서 나오자나

뭐가 문젠건뎅

 

- 비동기 await으로 출력하면 값이 나온다

const userId = await response.text();
console.log(userId);

로 출력하면 잘 나오지만, string으로 나온다.

그렇다고 Number로 강제 형변환을 해주면 NaN이 나온다.

 

 

---

해결법 : 비동기 await에서 형변환을 하는게 아니라, return 시에 형변환을 해주니 해결되었다.

왜 await 시에 Number(response.text()); 로 하면 NaN이 나오는 걸까?

 

chat gpt에게 물어보았다. 

이유 : 

와 그런거였어??

할당과 형변환을 두 줄에 나눠서 실행할 경우, 명확한 순차 실행이 이루어져 에러가 나지 않지만,

await Number(response.text());

의 경우, 아직 비동기처리가 완료되지 않은 상태에서 형변환을 먼저 하려고 해서 Number 형으로 바꿀 수 없는 값을 바꾸려하게 되므로

NaN에러가 나는 것이다.

 

 

별 것은 아니었지만서도 해결해서 좋음..