Fetch 사용하기(Get 사용하기)

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있습니다.

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch 사용하기 - Web API | MDN

 

fetch 사용방법은

        fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!

            .then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다

            .then(data => {

                console.log(data) // 개발자 도구에 찍어보기

            }) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다

• fetch("여기에 URL을 입력") ← 이 URL로 웹 통신 요청을 보낼 거야!
  • ← 이 괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET!
• .then() ← 통신 요청을 받은 다음 이렇게 할 거야!
• res ⇒ res.json()
  • ← 통신 요청을 받은 데이터는 res 라는 이름을 붙일 거야(변경 가능)
  • ← res는 JSON 형태로 바꿔서 조작할 수 있게 할 거야!
• .then(data ⇒ {}) ←JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙일거야

리마인드 GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.

http://naver.com?param=value¶m2=value2

POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.

data: { param: 'value', param2: 'value2' },