fetch api 사용하기

fetch api란?

fetch()는 네트워크 요청을 쉽게 활용할 수 있게 만들어줍니다. api를 가져올 때 예전에는 XMLHttpRequest을 사용했습니다. 하지만 지금은 fetch를 통해서 쉽게 가져올 수 있습니다. 

api를 통해 연습해보기 

리액트 예시에서도 똑같이 사용할 api를 fetch() 예시에 사용해보겠습니다.

홈페이지에 접속하면 위와 같은 화면이 보입니다.

랜덤유저생성기는 자동으로 유저 정보를 생성해줍니다.

랜덤유저생성기 바로가기

10명의 정보를 가져오려 한다면 파라미터로 ?result=10이라고 붙여주면 됩니다.

우선 fetch를 활용해보기 전에 무슨 값을 받는 지를 알아봐야 합니다. 

console.log(fetch("https://randomuser.me/api/?results=10"));

fetch를 사용하면 어떤 값을 받게 될까요? 

콘솔을 통해 실행해봤습니다.

위의 코드를 실행하면 "프로미스"라는 값을 받게 됩니다. 프로미스는 자바스크립트의 비동기 처리에 활용되는 객체입니다. 좀더 풀어서 우리는 fetch를 통해 10명의 프로필을 달라고 요청을 했습니다. 동기라는 것은 프로그램이 끝날 때까지 다른 일은 하지 않는 것입니다. 비동기라는 것은 요청해놓고 다른일을 하면서 기다리는 것이죠. 프로미스는 비동기 처리 객체이기때문에 다른 것을 하다가 요청에 대한 응답이 왔을 때 그 요청에 대한 것을 이어서 처리하면 됩니다.

프로미스는 말 그대로 약속입니다. "나에게 이것을 가져다 줘!" 라고 약속했을 때 우리는 그 약속을 다른 일을 하면서 기다리고 약속은 2가지 형태의 결과가 나옵니다. 약속대로 가져오거나 약속의 거절이죠. 각각의 코드를 통해 약속대로 가져오면 이런 코드가 실행되고, 혹시 거절되었을 땐 이런 코드가 실행된다고만 정하면 됩니다.

fetch로 가져온 값을 활용해볼까요?

fetch("https://randomuser.me/api/?results=10")
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.log(err));

then을 통해 가져온 값을 리턴해서 사용할 수 있습니다. 받은 값을 json()을 통해 json으로 바꾸고 console.log를 사용해서 json 값을 출력시키는 코드입니다. 혹시 err가 나면(약속의 거절) catch는 err를 잡아서 콘솔에 어떤 에러가 발생했는 지 알려주게 됩니다. 해당 코드를 실행하면 콘솔창에 어떻게 나타날까요?

콘솔창을 확인하면 json으로 변한 값을 확인할 수 있습니다.

저는 콘솔에 값을 보여주기 위해 코드를 사용했지만 변경한 값을 자연스럽게 코드안에서 사용하시면 됩니다. 지금까지 한 내용은 get 요청을 처리한 방법입니다. 그렇다면 post 등의 요청은 어떻게 해야할까요?

fetch로 post 요청 보내기

fetch()는 첫 번째 인수로는 링크를 받고, 두 번째 인수로는 추가 데이터를 객체로 받습니다. 이 두 번째 인수를 통해서 post 요청을 하면 됩니다. 

const obj = {
  body: ...,
  headers: {},
  method: 'POST'
}
fetch(URL, obj)
.then(res => res => res.json())
.then(json => console.log(json))
.catch(err => console.log(err));

해당 형태로 사용하면 됩니다. post뿐만 아니라 get을 제외한 다른 요청도 마찬가지로 사용하면 됩니다.

공감은 제작자에게 큰 힘이 됩니다.