【JavaScript】Fetch API의 기초

fetch() 메소드란?

JavaScript의 fetch() 메소드는
"비동기 통신으로 요청(request)을 발행하고, 해당 응답(response)을 취득하는" 함수이다.

 

즉,
「비동기 통신이라는 방법으로, 서버상에 있는 원하는 데이터를 취득할 수 있다」 라는 의미이다.

fetch() 메소드를 이해,하려면 요청·응답, 비동기 통신이 무엇인지 이해해야한다.
WEB 페이지의 구조도 보면서 차례로 확인해보자!

⇒ 웹페이지 구조로 보는 요청과 응답

웹페이지 구조에 대한 요청과 응답은 아래와 같다.

 

■화면에 WEB 페이지를 표시하는 구조

WEB 페이지의 표시는

브라우저 상에서 「이 웹 페이지를 보고싶어!」라는 요청(request)를 송신하고,

서버가 「이게 WEB 페이지의 정보야!」라고 응답(response)을 돌려주는 것으로 성립되고 있다.

우리가 WEB 사이트를 볼 때에는 「여기 WEB 페이지 정보를 보여줘!」라는 요청(request)를 반드시 보내고 있다.

 

그리고 응답(response)로 받아오는 WEB 페이지의 정보라는 것은

문장이 쓰여진 HTML 파일이나 디자인을 조정하는 CSS 파일, 이미지 데이터이기때문에

화면에는 우리에게 익숙한 WEB 페이지가 만들어지는 것이다.

 

지금까지의 내용을 근거로 하면,
fetch() 메소드의 설명에 있는 「요청 발행과 응답 취득」 이란,
「서버상에 있는 원하는 데이터를 fetch(취득)할 수 있다」 라고 하는 의미인 것을 이해할 수 있을 것이다.

 

⇒ 비동기 통신 정보

위에서 설명한 바와 같이 브라우저와 서버의 통신으로 데이터 취득을 하려면

「요청과 응답」을 주고받는 것이 발생하는데 

통상적으로는 이 작업은 「동기 통신」이라고 하는 것으로 행해진다.

 

예를 들어 WEB 페이지의 표시나 이동/수정을 하면 화면이 순간 새하얗게 되고나서 표시가 되지만,

이 새하얀 상태에는 사이트의 조작 등은 불가능하다.

 

이와 같이 요청에 대한 응답을 받을 때까지

다음 처리를 하지 못하고 기다려야 하는 것이  「동기 통신」이다.

 

「비동기 통신」은 이와 반대로

요청을 발행하고 응답을 받을 때까지 다른 처리를 할 수있다.

 

평소 자주 볼 수 있는 비통기 통신의 대표적인 예는 구글 서제스트이다.

Google의 검색 엔진을 사용하고 있으면 아래 이미지처럼 뜰 것이다.

구글 서제스트

이때 검색란에 검색하려는 키워드를 입력하면 관련 목록이 폼 아래에 자동으로 표시되는 것이다.

이건 1자를 입력할 때 마다 검색후보를 서버에 요청하고, 그 응답을 페이지에 반영하고 있는데

응답을 하는 와중에도 문자를 입력하거나 다른 처리를 할 수 있다는 것이다.

 

비동기통신은

동기통신과 같은 대기시간이 없으며 계속해서 다른 처리를 할 수 있다는 점에서

사용자 편의성 개선(향상)으로 이어진다.

 

⇒ fetch에 대해서(정리)

지금까지 fetch의 개요를 잡기 위해 여러 설명을 했는데 한 줄로 정리하자면

 

서버로 원하는 데이터 요청을 전송하면 리스폰스를 기다리면서 다른 처리도 할 수 있다는 것이 위 내용의 핵심이다.

 

Fetch API에 대해서

fetch에 대한 조사를 하다보면 「Fetch API」라는 말이 자주 나온다.

* API라는 것은 소프트웨어나 프로그램을 이어주는 것을 의미함

 

「Fetch API」는 외부와 프로그램을 연결할 수 있는 창구와 같은 것으로

fetch() 메소드는 요청 발행과 응답을 얻는 함수(프로그램의 일부)이다.

 

조금 복잡할 수도 있겠지만

「Fetch API라고 하는 창구가 있어서 JavaScript의 fetch를 사용해 외부의 데이터 취득이 가능하다!」 라는 거임..

⇒ fetch는 직관적이고 알기 쉬운 코드로 취급할 수 있다.

간단한 예로 단순히 요청 송신만 하는 코드로 비교하기

 

■fetch

fetch("URL");

■XMLHttpRequest

var xhr= new XMLHttpRequest();
xhr.open("GET","URL");
xhr.send();

위의 코드만 봐도 XMLHttpRequest는 fetch에 비해서 코드가 길고 어렵게 보인다.

 

코드에 대해서 주석으로 설명을 하자면 아래와 같다.

var xhr= new XMLHttpRequest();　//XMLHttpRequest를 호출해서
xhr.open("GET","URL");　　// 통신 설정을 하고
xhr.send();　　// 통신을 시작한다.

위의 코드와 같이 주석을 설정해도 뭔가 정리가 안된 느낌도 있는데

나중에 수정사항이 생겨서 수정할 때도 좀 귀찮을 것 같다는 생각도 든다.

 

⇒ fetch는 반환하는 값이 Promise 기반

Promise라는 것은 처리가 성공했는지 실패를 했는지의 상태를 나타내는 객체로,

그 상태에 따라 후속처리를 잘 컨트롤 해주는 것이다.

 

전제로

비동기로 행해지는 통신은 반드시 성공하는 것이 아니다.

최종적인 처리 상태는 「성공」인가 「실패」인가 어느 쪽인가가 되는 것이다.

성공했을 때의 후속처리에서는 취득한 데이터를 어떻게 다룰 것인가를 지정하고 싶고

실패했을 경우 후속 처리에는 실패했움! 이라고 알림을 보낼 것을 지정하고싶을 수 있다.

어쨌든 데이터 취득 후의 처리는 데이터 취득의 성공여부를 고려해 각각 기술할 필요가 있다.

 

이  「데이터 취득을 하는 코드」와  「데이터 취득 후 처리하는 코드」를 분산시키지 않고

 「성공 or 실패를 나타낸다→ 각각의 경우를 처리」까지를 일련의 코드로 나타낼 수 있는 것이 Promise 객체가 된다.

 

fetch는 비동기 처리 결과를 이 Promise 객체로 전달하기 때문에

성공하면 이 처리를 실행하고, 실패하면 이 처리를 실행해! 라고 하는 통신 후의 처리도 간단하게 할 수 있다.

 

기본적인 사용법

fetch() 메소드의 기본적인 사용법에 대해서 데이터를 취득하는 것을 통해 확인해보자

 

먼저 요청을 발행한다.

fetch("https://script.google.com/macros/s/AKfycbx59mSU5gTZ_FExAwaZrgjEorUcuki0AqGnh_XYn5uyZi_RSYzJ/exec");

돌아오는 값을 개발자 콘솔(F12 눌러서 console탭 부분 클릭)에서 본 것이 아래 이미지이다.

설명한 대로 Promise가 되어있는 것을 확인할 수 있다.

 

하지만 이것만 봤을 때는 뭐가 뭔지 모르니까 데이터 내용을 볼 수 있도록 해보자.

Promise는 후속처리를 일련의 코드로 쓸 수 있으니까

fetch의 뒤쪽에 코드를 연결해서 작성한다.

 

※ Promise는 then과 catch를 사용해서 코드를 연결해서 작성할 수 있다.

【메모】
성공한 경우 ・・・ then(성공 시 처리 내용); 을 실행
실패한 경우 ・・・ catch(실패 시 처리 내용); 을 실행

 

fetch("https://script.google.com/macros/s/AKfycbx59mSU5gTZ_FExAwaZrgjEorUcuki0AqGnh_XYn5uyZi_RSYzJ/exec")
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log("실패");
});

 

통신이 성공했을 때와 실패했을 때의 후속처리를 작성했다.

2〜7행에서 성공을 했을 때의 설정이고 then이후 처리가 실행된다.
8〜10행에서 실패를 했을 때의 설정이고 catch 이후의 처리가 실행된다.

 

위의 코드를 실행하면 데이터 취득의 결과는 아래와 같다.

데이터가 어떤 값을 가지고 있는지 확인할 수 있다.

이 예제는 통신이 성공해서 취득한 데이터 결과값을 콘솔에 표시하고 있다.

 

이 코드는 JSON형식으로 데이터를 받고 있지만, 필요에 따라서 다른 형식으로 받을 수도 있다.

다른 형식 몇 개만 메모.

⇒ 형식 : text

fetch("URL")
  .then(response => {
    return response.text();
  })
  .then(text => {
    console.log(text);
  })
  .catch(error => {
    console.log("실패");
});

⇒ 형식 : arrayBuffer

fetch("URL")
  .then(response => {
    return response.arrayBuffer();
  })
  .then(arrayBuffer => {
    console.log(arrayBuffer);
  })
  .catch(error => {
    console.log("실패");
});

⇒ 형식 : blob

fetch("URL")
  .then(response => {
    return response.blob();
  })
  .then(blob => {
    console.log(blob);
  })
  .catch(error => {
    console.log("실패");
});

 

각각의 형식에 대해서는 추후에 더 설명을 추가하겠음..

데이터 취득의 기본에 대해 적었지만 이 내용을 이해를  잘 해놓는다면 실전에서 사용하기 더 쉬워진다.

 

아 그리고 밑에 적은 것 처럼 지원대상이 아닌 브라우저는 아래와 같음

IE 지원 안함! 또 Android 4.4.4, ios safari 10.2 이하도 지원안함.

---

실제로 느낀 점?

XMLHttpRequest API를 대학생 때 잠깐 했었는데 생각 외로 실제 흐름이랑 작성한 순서가 달라서

전체적으로 가독성이 떨어지고 수정할 때도 번거로웠던 기억이 있다.

 

지금회사에서 Fetch API로 웹 사이트를 신규개발하고 있는데

오브젝트로 묶인 옵션 지정이나 Promise 오브젝트에 의한 일련의 통신 후의 기술에 의해

간단하고 보기 쉬운 코드로 비동기 통신을 작성할 수 있어서 좀 편했던 것 같다.

 

자세한 설명은 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API 을 참고하길 바람!!​