[Javascript] ajax 사용하기: fetch 함수

예전에는 ajax 통신을 수행하려면 XML 어쩌고 하는 타입을 가져다가 복잡한 비동기 핸들링을 시도하거나, 제이쿼리 등의 간편화된 라이브러리를 사용해야 했었다.

하지만 ES6부터는 ajax에 대한 간편화된 기능이 곧바로 지원된다!
바로 fetch라는 함수인데.
꽤 근래에 나온 버전이므로, IE 등에서는 돌아가지 못할 수도 있다는 게 단점이다.
하위호환성을 고려해야 한다면 babel을 통한 트랜스파일링이 요구될 것이다.

fetch 함수는 첫번째 인자로 통신을 시도할 URL, 두번째 인자로 추가 데이터들의 오브젝트를 받는다.
그리고 핸들링을 담당할 Promise를 반환한다. 이 Promise 반환의 then 메서드에다 핸들러를 정의하면 된다.

코드를 보자. 테스트환경은 Express.js인데, 이건 그리 중요한건 아니고
일단 ajax를 시도할 뷰는 이렇다.
/ajax라는 페이지에 전송을 시도해서 텍스트를 하나 받고, alert로 띄울 것이다.

fetch의 Promise then 핸들러는 하나의 Response 객체를 인자로 받는데,
골때리는건 저것도 Promise라서 데이터를 꺼내려면 또 then을 걸어줘야 한다는 것이다.

그리고 서버 측의 ajax 처리 코드다. "안녕"이라는 텍스트만 하나 쏴준다.

한번 돌려보자

저기서 누르면

잘 가져온다.

이외에도 method 선택, body로 보낼 인자 등 기타 설정들은 fetch의 2번째 인자로 오브젝트를 넘겨주는 것으로 수행할 수 있다.
이번엔 텍스트를 body로 넣고 보내서, ajax 처리 서버에서는 그걸 다시 반송하고, 그걸 다시 받아서 alert를 하도록 했다.

서버측 코드다. 그냥 받고 그대로 돌려주기만 한다.

그럼 이렇게 잘 작동한다.

더 자세하고 유익한 정보를 원한다면, 문서를 참고하자.
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Fetch%EC%9D%98_%EC%82%AC%EC%9A%A9%EB%B2%95

https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS