클라이언트(프론트)에서 api return 처리를 어떻게 하시나요?

Question

안녕하세요
클라이언트(프론트)단에서 axios 사용해 REST api 
return 스펙정리를 해서 서버단과 이야기해 수정을 하려고 합니다.
고려사항 등 도움을 주시면 감사하겠습니다.

Method
- GET : 정보조회시
- POST : 저장시(회원, 주문, 아이템 등)
- PUT : 수정시
- DELETE : 삭제시

현 구현
- HTTP status 200은 성공, 그 외 에러처리 => 서버단에서 보내주는 msg 혹은 프론트에서 하드코딩으로 문자열 출력(alert)

문제점
1) 성공과 실패 및 실패 사유에 대한 return 구조체가 생각 이상으로 깊은 구조이며 일관성이 없음.
ex1) response.data = { 객체 정보 } 
ex2) response.data = Success; 
-- 여기부터 문제 -- 
ex3) response.data.detail = Faile; 
ex4) response.data.detail[0].msg = Faile; // 기타 다른정보들 포함됨
ex5) response.data.messages 문자열

2) 몇개의 api는 return 값으로 status가 200으로 string 혹은 object가 날라옴.
3) 사용자 정보제공(문자열) 하드코딩

다국어 설정도 고려하고 있기에.. 
실패시 정보를 연상코드로 리턴받을까합니다.(개인 생각)

작성하고 보니 어떻게 문제점은 보이는데 좋은 개선점이 있으시면 의견주시면 감사하겠습니다.

박정환 · Accepted Answer

REST API의 repsonse 정의를 질문하셨습니다.

간단하게 해봅시다.
이 패턴들에 detail이 더 추가되거나, message를 constant code화 시키셔도 됩니다. (자유)

1. http status 200 (성공)
GET (성공일시 list나 단일 객체를 반환합니다.)
response.data : { result : success, message : success, code:200, data: {list : [ ... ]} }
response.data : { result : success, message : success, code:200, data : {object : { ... }} }

DELETE (성공일시 성공 메세지만 반환합니다.)
response.data : { result : success, message : success, code:200 }

PUT, PATCH (성공일시 트랜잭션이 일어난 객체 정보를 반환합니다. (이부분은 논의해서 정리하면 됩니다.))
response.data : { result : success, message : success,  code:200, data : {detail : {전달한 객체}} }

여기부터는 http status에 따른 결과입니다.
회선 불안정이나 서버 이슈등으로 발생할 수 있습니다.

2. http status 404 (api미존재)
response.data : { result : fail, message : not found, code:404, detail :  }

3. http status 400 (bad request)
response.data : { result : fail, message : bad request, code:400, detail :  }

4. http status 500 (internal server error)
response.data : { result : fail, message : intenal server error, code:500, detail :  }