AJAX
AJAX(Asynchronous JavaScript And XML, 비동기적 JavaScript와 XML)는 서버에서 추가 정보를 비동기적으로 가져올 수 있게 해주는 포괄적인 기술을 나타내는 용어로 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 페이지를 새로고침 없이 일부만을 위한 데이터를 로드하는 기법이다.
비동기적 자바스크립트 동작을 하는 기술들을 통틀어 AJAX라고 부른다.
만들어진지 오래되었고, 가독성이나 동일 출처, 보안 등 여러 불편한 문제들로 jquery나 다양한 API들이 등장했다.
웹 애플리케이션의 기본 작업 중 하나는 HTTP 프로토콜을 통해 서버와 통신을 하는 것이다. 여기서 fetch와 axios를 사용하여 쉽게 통신할 수 있다. 둘의 기능은 매우 유사하고, Fetch API는 axios의 주요 기능을 완벽하게 재현할 수 있다.
Fetch가 뭘까?
fetch메소드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을수 있도록 해준다. fetch 메소드에는 가져올 리소스의 필수로서 URL을 사용하고,응답을 검색하는데 사용할 Promise를 반환한다
fetch의 구조
fetch(주소, 설정값(객체))
.then(콜백함수)
.catch(콜백함수)가장 기본적인 구조로 주소로 요청을 보내고, 설정값에 'GET', 'POST'등의 메소드나 보낼 기타 데이터 등을 넣을 수 있다. then은 응답 Response 객체를 받고, catch는 요청에 대한 에러를 받는다.
fetch(URL, {
method: 'POST','GET','PUT'...
body: JSON.stringfy({object})
headers: {
'Content-Type': 'applicaction/json'
}
})
.then((res) => res.json())
.catch((err) => console.log(err)GET 요청
fetch('https://.....')
.then(res => res.json()) //응답을 JSON 형태로 파싱
.then(data => console.log(data)) //파싱된 데이터 출력
.catch((err) => console.log(err) //에러 처리POST 요청
fetch('https://......', {
method: 'POST'
body: JSON.stringfy({
title: 'abv'
content: 'Discord',
userId: 1,
}),
headers: {
'Content-Type': 'applicaction/json; charset=UTF-8'
}
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err)Axios
Axios는 브라우저에서 node.js또는 XMLHttpRequests에서 HTTP 요청을 수행하는 데 사용되는 JavaScript의 라이브러리이고, JS ES6에 고유한 Promise API를 지원한다. HTTP 요청 및 응답을 가로채고 XSRF 공격에 대한 클라이언트 보호를 활성화 하는데 사용할 수 있다.
Axios() 요청
//post 요청
axios({
method: 'POST',
url: 'https.....'
data: {
email: 'dfdsfs
username: 'abc'
}
headers: {
'Content-Type': 'applicaction/json'
}
})
.then((res) => {
console.log(res.data)
})
.catch((err) => console.log(err)또는
axios
.post('https://....', data, {option})
.then(res => console.log(res.data))
.catch(err => console.log(err))GET요청
axios(url) // get은 기본이므로 생략가능
axios.get(url, {option})
.then()
.catch()axios와 fetch의 차이점
axios: 요청 객체에 URL이 있다.(axios.get(url))
Fetch: 요청 객체에 URL이 없다.(fetch(url))
axios는 쉽게 설치할 수 있는 독립실행형 패키지이다. (npm install axios --save)
Fetch는 대부분의 최신 브라우저에서 내장되있는 함수이다.
axios는 쉽게 설치할 수 있는 독립실행형 패키지이다. (npm install axios --save)
Fetch는 대부분의 최신 브라우저에서 내장되있는 함수이다.
axios는 쉽게 설치할 수 있는 독립실행형 패키지이다. (npm install axios --save)
Fetch는 대부분의 최신 브라우저에서 내장되있는 함수이다.
axios는 데이터(data) 속성을 사용하고, 객체가 담겨야한다.
fetch는 바디(body) 속성을 사용하고, 문자열(JSON.stringify)여야한다.
axios 요청은 상태가 200, statusText가 'OK'면 정상이다.
fetch 응답 객체에 ok 속성이 포함되어 있으면 가져오기 요청이 정상이다.
axios에는 http 요청을 가로 챌 수 있는 기능이 있다.
fetch는 가로채는 방법을 제공하지 않는다.
axios는 광범위한 브라우저를 지원한다.
fetch는 최신 버전(크롬42+, 파폭39+, 엣지14+, 사파리 10.1+)만 지원한다.
