비동기 HTTP 통신 종류(ajax, fetch,axios)
프로젝트 수행시 클라이언트와 서버 간 데이터를 주고 받는 과정이 필요하다.
이를 위해 HTTP 통신을 사용하게 된다.
HTTP 통신을 위해 JS에서 사용되는 Ajax, Axios, fetch를 알아보도록 한다
Ajax (Asynchronous JavaScript And XML)
Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법이다.
웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다.
XMLHttpRequest 객체
Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체이다.
Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다.
콜백지옥이 생길 수 도 있다.
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { // 요청에 대한 콜백
if (xhr.readyState === xhr.DONE) { // 요청이 완료되면
if (xhr.status === 200 || xhr.status === 201) { console.log(xhr.responseText); } else { console.error(xhr.responseText); } } }; xhr.open('GET', 'https://~~URL'); // 메소드와 주소 설정 xhr.send(); // 요청 전송JQuery Ajax
제이쿼리와 Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 한다.
그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)이다.
XMLHttpRequest가 사용되다가 불편함과 호환성을 이유로 jQuery 내에서 Ajax를 사용하는 것이 대세가 되었다.
jQuery를 사용하기 위해서는 cdn을 import해야하거나 API파일을 직접 다운받아서 사용해야 한다.
$.ajax({
url: "/examples/media/request_ajax.php", // 클라이언트가 요청을 보낼 서버의 URL 주소
data: { name: "홍길동" }, // HTTP 요청과 함께 서버로 보낼 데이터
type: "GET", // HTTP 요청 방식(GET, POST)
dataType: "json" // 서버에서 보내줄 데이터의 타입
})콜백지옥이 생길 수 도 있다.
$.ajax({
url: "~~",
success: function(data) {
const result = JSON.parse(data);
$.ajax({
url: `~~~`
success: function(data2){
const result2 = JSON.parse(data2);
$.ajax({
url: `~~`
success: function(data3){
......
}
})
}
})
},
}) fetch API
내장 라이브러리이기 때문에 import없이 사용 가능하다.
XMLHttpRequest 대체자로 나온것이 fetch API이다. -> 비동기 http 요청을 좀 더 쓰기 편하게 해준다.
fetch API는 Promise기반으로 동작한다. -> 콜백지옥 탈출
React Native같은 잦은 업데이트에도 잘 적용이 된다.
기본 응답 결과는 Response 객체이다 -> json으로 바꾸거나 text로 바꾸는 처리 과정이 필요하다.
구형 브라우저에서는 지원을 안한다.
네트워크 에러 발생시 계속 기다려야한다.
API 요청을 취소 할 수가 없다.
fetch('주소', 설정객체).then(콜백).catch(콜백);
fetch(url, { headers: { "Content-Type": "application/json", }, });Axios
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다
Axios도 Promise 기반이다.
크로스 브라우징 기반으로 브라우저 호환성이 뛰어나다.
자동으로 JSON데이터 형식으로 변환된다.
요청 취소 및 타임아웃 설정이 가능하다.
fetch에 존재하지 않는 기능이 좀 더 많다.
React에서 주로 사용된다.
XSRF 해킹 기법에 비교적 안전하다.
라이브러리 설치가 필요하다.
const axios = require('axios')
// ID로 사용자 요청 axios
.get('url~~')
// 응답(성공)
.then(function(response) { console.log(response) })
// 응답(실패)
.catch(function(error) { console.log(error) })
// 응답(항상 실행)
.then(function() { // ... })| axios | fetch |
|---|---|
| 요청 객체에 url이 있다. | 요청 객체에 url이 없다. |
| 써드파티 라이브러리로 설치가 필요 | 모던 브라우저 빌트인이라 설치가 필요없다. |
| XSRF 보호를 해준다. | 별도 보호가 없다. |
| data 속성을 사용한다. | body속성을 사용한다. |
| data는 object를 포함한다. | body는 문자열화 되어있다. |
| status가 200이고 statusText가 ‘OK’이면 성공이다. | 응답객체가 ok속성을 포함하면 성공이다. |
| 자동으로 JSON 데이터 형식을 변환된다. | .json() 메서드를 사용해야 한다. |
| 요청을 취소할 수 있고 타임아웃을 걸 수 있다. | 해당 기능 존재 하지않음 |
| HTTP 요청을 가로챌수 있음 | 기본적으로 제공하지 않음 |
| download 진행에 대해 기본적인 지원을 함 | 지원하지 않음 |
| 좀 더 많은 브라우저에 지원됨 | Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원 |
참고사이트
https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/
https://www.zerocho.com/category/HTML&DOM/post/595b4bc97cafe885540c0c1c
https://kyun2da.dev/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/axios-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC/
