자바스크립트 fetch 사용방법

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, XMLHttpRequest보다 강력하고 유연한 대체제입니다.

우리가 흔히 사용하는 axios, ajax 와 마찬가지로 cors, header 설정을 할 수 있으며, promise 를 리턴한다.

기본적인 사용방법은 아래와 같다.

// then
fetch(url) 
.then((res)=>res.json())
.then((data)=>{ console.log(data) })

// async, await
const res = await fetch(url)
const data = await res.json()

console.log(data)

헤더 설정 방법은 아래와 같다.

fetch(url, {
        method: "POST"
        headers: {
            Authorization: "token",
        },
}

 

필자는 개인적이지만, XMLHttpRequest, axios, ajax 보다 fetch 를 더 좋아한다...🎨