[Fetch_API]_API 명세와 맞추기 연습

2022. 1. 12. 16:12[프론트엔드]_/[Javascript]_ES6

728x90
반응형

이전에 한 Fetch API 의 경우 예시를 만들어서 보내고 받았습니다.

 

이번에는 실전에서 사용하고 있는 값들의 경우에 대해 공부해보았습니다

fetchdata의 경우 회사, 프로젝트에서 주어지는 API 명세를 보고 어떤 값을 전달해야하는지 파악후 형식에 맞춰서 작성해 줍니다. 위는 예시입니다.

해당값을 fetch 를 이용해서 작성해 보았습니다

Promise를 좀더 구체적으로 써서 resolve와 reject가 잘 보이게 하였고,

fetch() 의 첫번째 인자로는 url을 이후에는 option을 전달하였습니다

일단 기본적으로 headers method body는 기본으로 들어가야 하며,

headers 또한 api 명세에 따릅니다.

 

프로젝트에 맞춰 https://developer.mozilla.org/ko/docs/Web/API/Request

 

Request - Web API | MDN

Fetch API의 Request는 리퀘스트 리소스를 표현해주는 인터페이스입니다.

developer.mozilla.org

와 같은 no-cors 옵션이나 자체적으로 만든 옵션을 전달할 수도 있습니다.

 

그리고 fetch를 사용하고 .then을 사용하게 되면 성공시 값을 핸들링하게 됩니다.

첫 번째 then 함수에 전달된 인자 response는 http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체입니다.

 

이 값을 그냥 사용하게 되면 오류를 발생합니다. 왜냐하면 json 객체의 응답 여부만을 가지고 있기 때문이며,

이를 json() 으로 return 값을 받아야합니다.

728x90
반응형