Javascript에서 비동기 http 통신을 하려면, ajax, axios, fetch 세가지가 있다.
Ajax
javascript를 이용해 클라이언트와 서버간 데이터를 주고 받는 비동기 http 통신
XMLHttpRequest(XHR) 객체를 이용해서 필요한 데이터만 불러올 수 있음
ajax라고 하면 순수 ajax와 jQuery를 통한 ajax사용법이 있는데,
후자의 방식이 편리하게 작성가능하고 직관적이다.
Axios
node.js와 브라우저를 위한 promise api를 활용하는 http 통신 라이브러리
promise 기반으로 데이터를 다루기에 좋고 브라우저 호환성이 뛰어남
Fetch
Javascript ES6부터 들어온 내장 라이브러리
promise 기반이라 데이터를 다루기 쉽지만, 지원하지 않는 브라우저가 존재한다 (IE11 등)
네트워크 에러 발생 시 response timeout이 없어서 계속 기다려야한다.
json으로 변환하는 과정이 필요하다.
promise
javascript의 비동기 통신을 간편하게 처리할 수 있게 도와주는 객체
javascript 비동기를 처리하기 위해서 ajax의 경우 callback 함수를 사용해야 한다.
콜백을 사용하면 중첩으로 복잡도가 증가하고, 예외처리 등의 어려움이 있다.
이러한 단점을 보완하기 위해 promise라는 것이 생겨났다.
생각
내가 일하는 곳에는 웹프레임워크를 사용하지 않고 주로 ajax를 사용한다.
순차적으로 처리하지 않아 고생하다가 얼마전 드디어 왜 사용하는지 알게된 콜백…ㅠ
현업에서는 react, vue 등 웹프레임워크를 사용하는 경우, axios를 많이 사용하는 것처럼 보이지만, 언제나 케바케ㅎㅎ
