서버에 데이터를 호출/요청하는 fetch함수

서버에 데이터를 호출/요청하는 fetch함수

프론트에서 서버 api를 호출하면 데이터를 받아올 수 있다.

1. Web API - fetch (promise 기반)

- fetch(서버주소).then(콜백).then(콜백)........ .then(콜백).catch(에러콜백)

- then의 순서로 순차적으로 진행됨

- then과정 중 에러가 발생하면 catch로 바로 넘어가서 에러 출력

1) Get

서버와 통신하여 받기 원하는 데이터를 요청할 때 사용

메서드의 default값으로 get이 설정되어 있기 때문에 바로 사용가능

fetch(http://내가get하기원하는 서버의 주소) .then(response => response.json()) // 콜백함수를 통해 response를 json파일로 변환 .then(changedRes => console.log(changedRes)) // 콜백함수를 통해 변환된 파일을 콘솔에 출력 .catch(err => console.log(err)) // then과정중 에러가 발생하면 catch로 넘어가 에러 출력

결과

{ "id": 1, "title": "정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는 정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다.", "content": "모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 모든 국민은 종교의 자유를 가진다. 국가는 농·어민과 중소기업의 자조조직을 육성하여야 하며, 그 자율적 활동과 발전을 보장한다. 모든 국민은 양심의 자유를 가진다. 누구든지 체포 또는 구속을 당한 때에는 즉시 변호인의 조력을 받을 권리를 가진다.", "createdAt": "2019-02-24T16:17:47.000Z", "updatedAt": "2019-02-24T16:17:47.000Z", "UserId": 1 }

2. 라이브러리 - axios

어떤 것을 사용하는지는 중요하지 않고, http 통신의 요청과 응답, Promise에 대한 이해가 더 중요하다.

출처

https://velog.io/@luna238/Javascript-%EC%84%9C%EB%B2%84%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC-%ED%98%B8%EC%B6%9C%EC%9A%94%EC%B2%AD%ED%95%98%EB%8A%94-fetch%ED%95%A8%EC%88%98

https://velog.io/@dankim/2019.09.27-TIL-Fetch-API-Promise-eqk11d4t0q

from http://moretz0921.tistory.com/323 by ccl(A) rewrite - 2021-11-22 16:01:53