이번에 백엔드와 통신할 때 응답구조에서 뭔가 자꾸 오류가 났었다...
분명히 백엔드에서 정해준 api 그대로 했는데!
계속 머리를 싸잡고 있다가 진짜 바보같은 실수를 했었어서 오류 다잡으면서
이런 오류 다신 안하고싶어서 포스팅...
1. 오류 내용
const randomApi = async () => {
try {
const response = await axios.get("/get/api");
return response.data;
} catch (error:any) {
throw new Error("GET 요청 가져오는 도중 에러");
}
};
평범한 axios get 요청을 받아와야했는데 계속 . . 계속 오류가 났다. . ㅠ ㅠ
내가 받고싶은건 간단한 테이블 구조의 데이터였다.
{
success: true,
message: "불러오기 성공",
data: {
id: 1,
question: "질문",
answers: ["답변1", "답변2", "답변3", "답변4"]
}
}
그런데 자꾸 자꾸 api 요청 형식이 안맞는다는 오류가 났다.
어떤 부분이 안맞지 계속 고민하다가
response.data
이 부분에서 오류가 났다는 것을 확인할 수 있었다.
2. 문제 해결
정말 단순하게
response.data.data
로 고쳤더니 오류가 해결이 됐다. 끄 응 . .
먼저 response.data 는 일반적으로 HTTP 요청의 응답 본문 전체를 나타낸다
그리고 response.data.data 는 json 응답에서 data 속성에 접근한 값을 말한다
이게 무슨말이냐 하면
일반적으로 api 는 응답을
{
"success": true,
"message": "get 요청 성공",
"data": { /* 실제 데이터 */ }
}
이런 계층 구조로 반환하게 된다.
여기서 최상위 레벨은 요청의 성공 여부나, 메시지까지 포함하게 된다.
하지만 여기서 data 속성은 실제 데이터 를 나타내기 때문에
response.data 는 api 응답의 전체 데이터를 처리하여
성공여부나, 메시지를 확인하는 경우에 옳고
response.data.data. 는 받아온 데이터의 실제 데이터에 접근할 때 유용한거다.
즉 data속성에 있는 값만 사용하려는 경우에 필요한거다. .
그래서 오류코드일 때 response.data 로 받아오는구나. . 싶었다.
