(Javascript) fetch를 이용해서 api 가져오기 , 사용법, 작동 과정

 

 

fetch() 함수를 이용하면 서버에서 데이터를 가져오거나 보낼 수 있다.

 

이 함수를 이용해 무료 api 정보를 받아올 수 있다.

 

나는 퀴즈 앱을 만들기 위해서 무료 퀴즈 api url을 받아왔다. 

 

Open Trivia DB

 

 

 

fetch() 사용법

fetch() 함수의 기본 문법은 아래와 같다.

let promise = fetch(url, [options]);

 

• url(필수) : 접근하고 싶은 url 링크 
• [options] : 선택 매개변수

 

옵션은 다양하지만 아래 5가지가 가장 많이 사용된다. 

 

또한 옵션을 적지 않으면 자동으로 Get 메서드로 처리되어 url로부터 정보를 받아오게 된다. 

 

• method: 요청의 HTTP 메서드를 지정
  • GET : 서버로부터 데이터를 요청
  • POST : 서버로 데이터를 보냄
  • PUT : url에 리소스 저장, 리소스 업데이트 시 사용
  • DELETE : 지정된 url의 리소스 삭제
  • PATCH : 리소스 일부 수정
  • HEAD : get과 유사하지만 헤더 정보만을 가져옴
  • OPTIONS : 통신을 시작하기 전에 서버가 지원하는 메서드, 헤더 및 CORS 정책을 확인하기 위해 사용
• body: 요청 본문에 포함될 데이터 포맷을 서버에게 알려줌 (get메서드일 때는 필요 없음)
  • application/json : json 포멧이라는 것을 알려줌
  • multipart/form-data : form-data포멧이라는 것을 알려줌
• headers: 요청에 포함될 헤더 정보를 지정하는 객체
  • Content-Type : 요청 또는 응답의 본문의 유형 (텍스트, 이미지, JSON, XML 등)
  • Authorization : 인증 정보를 포함, 서버에 사용자 식별 및 권한 부여를 요청
  • Cache-Control : 요청이나 응답에 대한 캐시 처리 방법을 지정
  • Cookie : 클라이언트와 서버 간의 세션을 유지하고 상태를 관리
• mode: 요청의 CORS(Cross-Origin Resource Sharing) 모드를 지정
• credentials: 요청의 인증 정보를 설정

fetch(url, {
  method: 'POST',
  body: JSON.stringify({ username: 'example', password: '123456' }),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

 

 

 

fetch() 작동 과정

 

fetch() 함수를 호출하면 아래와 같이 작동한다. 

 

1. fetch에 주어진 url에 대해 http요청을 보냄

2. 서버는 요청을 받은뒤, 데이터를 응답으로 보내줌

3. 받아온 응답은 promise 객체로 반환됨

4. 요청이 완료된 데이터는 이후 then() 메서드 또는 async/await로 처리됨

 

프로미스, then, async/await에 대해서는 아래 포스팅에서 정리해 두었다. 

(Javascript) promise, async&await의 이해와 활용