fetch()
를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환
let promise = fetch(url, [options])
GET
메서드로 진행, url로 콘텐츠 다운로드됨fetch
호출 시 반환받은 promise
가 내장 클래스 Response의 인스턴스와 함께 이행 상태가 됨let response = await fetch(url); //http 상태 코드가 200~299일 경우 응답 본문을 받음
if (reponse.ok) {
let json = await response.json();
} else {
alert("HTTP-Error: " + response.status);
}
response.text() : 응답을 읽고 텍스트를 반환
response.json() : 응답을 JSON 형태로 파싱
response.formData() : 응답을 FormData 객체 형태로 변환
response.blob() : 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환
response.arrayBuffer() : 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식) 형태로 반환
fetch(url).then(response => response.json()).then(commits => aleert(commits[0].author.login));
let text = await response.text();
let parsed = await response.json(); // 실패
응답 헤더는 response.headers에 맵과 유사한 형태로 저장됨(맵은 아니지만 맵과 유사한 메서드를 지원)
let response = await fetch(url)
for (let [key, value] of response.headers) {} // 헤더 전체를 순회
headers옵션을 사용하면 fetch에 요청 헤더를 설정할 수 있음
let response = fetch(url, {
headers: {
Authentication : 'secret'
}
})
let user = {
name: 'John',
surname: 'Smith'
};
let response = await fetch('/article/fetch/post/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(user)
});
let result = await response.json();
alert(result.message);
Blob 이나 BufferSource 객체를 사용하면 fetch로 바이너리 데이터를 전송할 수 있음
async function submit() {
let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
let response = await fetch('/article/fetch/post/image', {
method: 'POST',
body: blob
});
Blob 객체는 내장 타입을 갖기 떄문에 특별히 content-type을 설정하지않아도 됨