fetch
자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다.
let promise = fetch(url, [options])
url : 접근하고자 하는 URL
ptions : 선택 매개변수, method나 header 등을 지정할 수 있음
options에 아무것도 넘기지 않으면 요청은 GET 메서드로 진행
데이터 추가할 때는 POST
fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환된다.
📝 코드로 알아보는 fetch
let result = fetch(serverURL);
result
.fetch(response => {
if(response.ok) {
//요청 성공
}
})
.catch(error => {
// 요청 실패
})
네트워크 요청 성공 시 Promise는 Response 객체를 resolve 한다.
네트워크 요청 실패 시 Promise는 Response 객체를 reject 한다
let url = 'https://api.github.com/repos/javascript-tutorial/ko.javascript.info/commits';
let response = await fetch(url);
let commits = await response.json(); // 응답 본문을 읽고 JSON 형태로 파싱함
alert(commits[0].author.login);
response.text() : 응답을 읽고 텍스트를 반환
response.json() : 응답을 JSON 형태로 파싱
response.formData() : 응답을 FormData 객체 형태로 반환
프라미스만 사용
fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
.then(response => response.json())
.then(commits => alert(commits[0].author.login));
$ Response
fetch(response => {
response.ok
response.status
response.statusText
response.url
response.bodyUsed
})
Reponse 객체는 결과에 대한 다양한 정보를 담는다.
Status code가 200-299 사이면 true, 그 외는 false
response.url은 요청한 URL 정보를 담고 있다.
Header
fetch(response)
.then(resp => {
for(let [k, v] of resp.headers) {
console.log(k, v);
}
})
response.headers로 Response 객체의 헤더 정보를 얻을 수 있다.
Body 메서드
fetch(serverURL)
.then(response => {
return response.json()
})
,then(json => {
console.log("body : ", json);
})
- response.json() 메서드는 얻어온 body 정보를 json으로 만드-는 Promise를 반환한다.
- Promise가 resolve 되면 얻어온 body 정보를 읽는다.
- text(), .blob(), .formData()등의 메서드로 다른 형태의 바디를 읽을 수 있다.
POST 요청
- method : HTTP 메서드(예: POST)
- body
- 문자열(예: JSON 문자열)
- FormData객체 : form/multipart 형태로 데이터를 전송.
fetch(serverURL, {
method: 'post',
headers: {
'Content-Type': 'application/json; charset=utf-8',
Authentication: 'mysecreat'
},
body: JSON.stringify(formData)
})
.then(type => type.json()) // 어떤 date type으로 파싱해줄건지
.then(json => { //파싱해준 데이터를 처리해주는 코드
console.log("POST 요청 결과", json);
})
fetch(url, options)로 fetch
- fetch(url, options)로 fetch 메서드에 옵션을 넣는다.
- method 필드로 여러 요청 메서드를 활용한다.
- headers, body 필드를 활용해 서버에 추가 정보를 보낸다.
요약
일반적인 fetch 요청은 두 개의 await 호출로 구성된다.
let response = await fetch(url, options); // 응답 헤더와 함께 이행됨
let result = await response.json(); // json 본문을 읽음
response.text() : 응답을 텍스트 형태로 반환함
response.json() : 응답을 파싱 해서 JSON 객체로 변경
