[Javascript] fetch() 함수 사용하기

0. fetch()

fetch() 함수는 HTTP 요청 전송 기능을 제공하는 Web API이다. XMLHttpRequest보다도 최근에 나온 기능이라고 한다.

 

fetch() 함수를 사용해 GET, POST 이외에도 PUT, DELETE 등 REST API와 사용할 수 있는 방식 또한 제공한다.

 

 

1. GET

fetch() 함수의 기본 요청 방식은 GET으로 간단한 구조를 가져 쉽게 사용할 수 있다.

 

fetch("/test")
    .then((res) => res.json())
    .then((data) => console.log(data))

 

 

* fetch() 함수가 가져오는 응답 데이터

fetch() 함수를 통해 가져오는 응답 데이터는 프로미스(promise)라는 비동기 처리를 위한 객체이다. 이를 다른 데이터 타입으로 변환하기 위한 함수는 다음과 같다.

 

text()	텍스트 타입
json()	JSON 타입
formData()	FormData 객체 타입
blob()	Blob() 타입 (바이너리 데이터)

 

 

2. POST

GET 이외의 방식에서는 다음과 같은 형태로 작성하게 된다.

 

method에서 사용할 요청 방식을 선택한다. headers는 주로 전송할 데이터의 타입을 지정하고 body에 전송할 데이터를 작성한다.

 

fetch("/hello", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        name : "홍길동",
        age : "27"
    })
})
    .then((res) => res.json())
    .then((data) => console.log(data))

 

 

3. PUT

PUT은 이미 존재하는 데이터를 변경하기 위한 요청 방식이다. method를 POST에서 PUT으로 변경하는 것 이외에는 POST 방식과 거의 유사하다.

 

fetch("/hello", {
    method: "PUT",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        name : "페이커",
        age : "27"
    })
})
    .then((res) => res.json())
    .then((data) => console.log(data))

 

 

4. DELETE

DELETE은 데이터를 삭제하기 위한 요청 방식이다. 데이터의 삭제가 목적이기 때문에 headers나 body가 필요없다.

 

fetch("/hello/1", {
    method: "DELETE",
})
    .then((res) => res.json())
    .then((data) => console.log(data))

 

 

* 멱등성 (Idempotent)

같은 연산을 몇 번씩 실행하여도 결과가 달라지지 않는 성질