Fetch

✒️ 2025-05-23 15:26 내용 수정

참고 자료 : mdn web docs Fetch API 사용하기, mdn web docs fetch() 전역함수

Javascript로 서버에 네트워크 요청을 보내고 정보를 주고 받을 수 있는 인터페이스를 제공

fetch() 메서드는 전역 함수이며, 네트워크에서 리소스를 취득하는 절차를 시작하고, 응답이 사용 가능해지면 Promise를 반환한다.
- Promise 참고.
응답은 Response 객체로 가져오며, Response 객체는 HTTP 응답 전체를 나타내는 객체다.
- 이 객체에서 원하는 정보를 가져오려면 그 정보를 가져올 수 있는 메서드를 사용해서 내용을 추출해야 한다.
- 추출한 결과는 또 다른 Promise로 반환된다.
HTTP에 대한 내용은 HTTP(Hyper Text Transfer Protocol) 참고.

fetch(resource)
fetch(resource, options) // 옵션이 여러 개라면 객체로 표기

resource : 취득하려는 리소스를 설정한다.
- 리소스의 URL을 제공하는 문자열이나 문자열 변환자를 포함한 객체, 또는 Request 객체를 파라미터로 설정할 수 있다.
options : fetch 요청에 적용하려는 옵션을 설정하며 method, header, body, mode, credentials, cache, redirect 등을 설정할 수 있다.
- HTTP(Hyper Text Transfer Protocol)#HTTP 헤더, HTTP(Hyper Text Transfer Protocol)#HTTP 요청 메서드 참고.

옵션	상세옵션	설명
`method`	GET, POST	요청 메서드
`header`		요청에 추가하고자 하는 header. Headers 객체나 String값을 가진 객체 리터럴 사용
`body`		요청에 추가하고자 하는 본문. 데이터 타입 객체들과 ReadableStream 객체를 사용할 수 있음
`mode`	corse, no-cors, same-origin	요청에 사용할 모드를 설정
`credentials`		브라우저의 자격 증명을 어떻게 취급할지 설정
	omit	브라우저가 요청에서 자격 증명을 제외하고, 응답에 포함된 자격 증명도 제외하도록 지시
	same-origin	기본값, 브라우저가 동일 출처 URL 요청에 대해선 자격증명을 보내고 URL 응답에 포함된 자격증명도 사용하도록 지시
	include	브라우저가 동일 출처 요청과 교차 출처 요청의 자격 증명을 포함하고, 항상 응답에 자격 증명을 사용하도록 지시
`cache`	default, no-store, reload 등	요청이 브라우저 HTTP 캐시와 어떻게 상호 작용할지 설정
`redirect`		리다이렉트 응답 처리 방법을 설정
	follow	기본값. 자동으로 리다이렉트를 따라감
	error	리다이렉트가 발생하면 에러오 함께 리다이렉트 요청을 중단시킴
	manual	호출자가 응답을 다른 context에서 처리함

Request와 Response 모두 본문에 데이터를 포함할 수 있다.
- 참고 자료 : mdn web docs Fetch API 사용하기#본문

데이터 타입	설명
ArrayBuffer	길이가 고정된 원시 이진 데이터 버퍼. 바이트 배열로도 부름
TypedArray	이진 데이터 버퍼에 기반을 둔 배열과 같은 보기를 생성
DataView	플랫폼의 자체 엔디언(바이트 정렬 방법)에 신경 쓰지 않고 ArrayBuffer에서 다양한 숫자 자료형 데이터를 읽고 쓰기 위한 인터페이스를 제공함
Blob	파일류의 변하지 않는 미가공 데이터를 나타냄. 텍스트, 이진 데이터, ReadableStream으로 변환 후 Stream 메서드로 데이터를 처리할 수 있음
File	파일에 대한 정보를 제공함
String, 문자 리터럴	문자형 데이터, JSON도 포함됨
URLSearchParams	인터페이스로, URL의 쿼리 문자열(?param=value)을 다룰 수 있는 유틸리티 메서드를 정의함
	인터페이스를 구현한 객체는 key와 value 쌍을 순회할 수 있음
FormData	인터페이스로, form 필드와 그 값을 나타내는 key/value 쌍을 쉽게 제공할 수 있는 메서드를 정의함

HTTP request와 response의 본문(body)을 추출하려면 추출 메서드를 사용하며, 모두 Promise를 반환한다.

메서드	설명
`arrayBuffer()`	ArrayBuffer으로 resolve한 promise 반환
`blob()`	Bloc으로 resolve한 promise 반환
`formData()`	FormData로 resolve한 promise 반환
`json()`	본문의 텍스트를 JSON 형태로 resolve한 promise 반환
`text()`	본문의 텍스트를 String(문자열) 형태로 resolve한 promise 반환

fetch('https://www.google.com') // 구글 홈페이지의 리소스를 요청
    .then((response) => { // callback function
        // console.log(response);
        return response.text(); // 응답을 String으로 resolve된 promise로 반환
    })
    .then((result) => {
        console.log(result); // 반환된 결과를 출력
    })

서버에 요청을 보내고 응답 받기

JSON(JavaScript Object Notation)#메서드, HTTP(Hyper Text Transfer Protocol)#HTTP 요청 메서드 참고.

1. 데이터 조회 요청 : GET

응답을 text 형태로 반환 받도록 설정한다.
method : get이 생략될 수 있다.
전체 데이터를 요청할 땐 url 전체를, 특정 데이터를 조회한다면 특정 데이터를 식별할 수 있는 정보를 전달해야 한다.

fetch('url') // url로 요청
    .then((response) => {
        return response.text();
    })
    .then((result) => {
        console.log(result); // 반환된 결과를 출력
    })

// 더 간단하게 줄이면
fetch('url')
    .then(response => response.text())
    .then(result => console.log(result));

2. 데이터 추가 요청 : POST

추가가 잘 실행 되었다면 추가된 내용이 반환된다.

fetch('url', {
    method : 'POST', // 요청을 보낼 때 POST 사용
    body : JSON.stringify(data) // 내용 추가할 때 JSON 형태로 추가
})
    .then((response) => {
        return response.text();
    })
    .then((result) => {
        console.log(result); // 반환된 결과를 출력
    })

3. 데이터 삭제 요청 : DELETE

삭제할 때는 특정 데이터를 지정해야 하기 때문에 url 뒤에 정보를 추가해야 한다.
삭제가 잘 실행되었다면 {"result":"deleted"}가 반환된다.

fetch('url', {
    method : 'DELETE', // 삭제 요청
})
    .then((response) => {
        return response.text();
    })
    .then((result) => {
        console.log(result); // 반환된 결과를 출력
    })

4. 데이터 수정 요청 : PUT

수정할 때도 특정 데이터를 지정해야 하기 때문에 url 뒤에 정보를 추가해야 한다.
반환되는 내용이 없어 데이터를 다시 조회해야 변경 사항을 확인할 수 있다.

fetch('url', {
    method : 'PUT', // 수정 요청
    body : JSON.stringify() // 내용 수정할 때 JSON 형태로 설정
})
    .then((response) => {
        return response.text();
    })
    .then((result) => {
        console.log(result); // 아무 값도 뜨지 않는다.
    })