서버로 데이터를 받거나 보내기 위해 JavaScript에서 자주 쓰이는 Fetch API에 대해 예제와 함께 알아보겠습니다.
Fetch API
HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 자바스크립트에서 접근하고 조작할 수 있는 인터페이스를 제공합니다.
콜백 기반 XMLHttpRequest와 달리, Fetch API는 프로미스를 기반으로 합니다.
또한, 브라우저에 내장되어 있기 때문에, 쉽게 바로 사용할 수 있습니다.
특정 URL에 요청 보내고 응답 받기
fetch(resource)를 사용합니다.
Response로 응답 객체를 표현하며, HTTP 응답 전체를 나타냅니다.
1
2
3
4
5
6
const url = "";
const run = async () => {
const response = await fetch(url);
console.log(response);
};
run();
응답의 JSON 본문 컨텐츠를 추출하려면, .json()을 사용합니다.
1
2
3
fetch(url).then((res) => {
console.log(res.json());
});
두 번째 매개변수 제공
fetch(resource, options) 메서드에 두 번째 매개변수(options)를 제공할 수도 있습니다.
헤더를 설정하거나, 메서드, CORS 관련 설정, 캐시 관련 설정 등을 지정해줄 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// POST 메서드 구현 예제
async function postData(url = "", data = {}) {
// 옵션 기본 값은 *로 강조
const response = await fetch(url, {
method: "POST",
mode: "cors",
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json"
},
redirect: "follow",
referrerPolicy: "no-referrer",
body: JSON.stringify(data)
});
return response.json();
}
postData("https://example.com/answer", { answer: 42 }).then((data) => {
console.log(data);
});
method: 요청 메서드 (Origin 헤더는 HEAD나 GET 메서드의 Fetch 요청에는 설정되지 않음)headers: 요청에 추가하고자 하는 헤더 (Authorization 헤더는 요청이 다른 출처로 리다이렉트 되면 제거됨)body: 요청의 본문 (GET, HEAD 메서드는 본문을 가질 수 없음)mode: 요청에 사용할 모드 (cors,no-cors,same-origin)credentials: 브라우저가 자격증명을 어떻게 취급할지 제어 (omit,same-origin,include)cache: 요청이 브라우저 HTTP 캐시와 어떻게 상호작용할지 제어 (default,no-store,reload,no-cache,force-cache,only-if-cached)redirect: 리다이렉트 응답 처리법 (follow,error,manual)referrer: 요청 리퍼러를 지정하는 문자열referrerPolicy: 요청에 사용할 리퍼러 정책integrity: 요청의 하위 리소스 무결성을 지정keepalive: 요청이 페이지 수명보다 오래 지속되는 것을 허용signal: AbortSignal 객체 인스턴스priority: 같은 종류의 취득 요청 중에서 이 요청의 상대적 중요도를 지정