[JavaScript] 자바스크립트 fetch

🎯 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 메서드에 옵션을 넣는다.
• method 필드로 여러 요청 메서드를 활용한다.
• headers, body 필드를 활용해 서버에 추가 정보를 보낸다.

 

🏷 요약

• 일반적인 fetch 요청은 두 개의 await 호출로 구성된다.

let response = await fetch(url, options); // 응답 헤더와 함께 이행됨
let result = await response.json(); // json 본문을 읽음

• response.text() : 응답을 텍스트 형태로 반환함
• response.json() : 응답을 파싱 해서 JSON 객체로 변경

 

📌 참고

• Using Fetch - Web API | MDN
• fetch