Ajax, Axios란??

Ajax 

Asynchronous Javascript and XML(비동기식 자바스크립트와 xml)의 약자이다.
서버와 비동기적으로 데이터 주고받는 JS기술을 의미한다.

 

Ajax를 이해하기 위해선 Server를 알아야한다. 

왜? Ajax는 서버랑 통신하는 기술이기 때문이다.

 

Server

유저가 데이터 요청하면 데이터 보내주는 프로그램이라고 생각하면 된다.

Ex) 유저가 웹툰주세요. => 네이버 웹툰 서버는 웹툰을 줌

데이터 요청하면 데이터 보내주는 시스템이다.

즉, 서버한테 요구해서 데이터를 가져와 HTML에 보여주면 이걸 웹서비스라 한다.

 

요청하는 방식

1. 데이터의 정확한 URL을 알아야한다.
2. 그 URL로 GET요청을 날려야 한다. => URL은 서버 개발자한테 물어보면 알려준다.

GET요청을 하는 방법
1. 브라우저 주소창에 URL 입력하기(이거 자체가 GET 요청)
2. 버튼으로 GET요청
<form action = "comic.naver.com" method="get">
<button type = "submit"> 이 버튼을 누르면 GET요청된다.

But 1, 2 번 방식은 전부 브라우저가 새로고침이 된다.

 

3. Ajax로 GET요청하기

새로고침 없이 서버에게 GET요청하는 JS코드이다. 
장점 : 새로고침 없으므로 웹페이지 전환이 부드럽다.

 

실제로 Ajax 요청하는 법

fetch(`url`)
 .then(response => response.json())
 .then(결과 => console.log(결과));
여기서 에러처리하고 싶다?
 .catch(() => {
	console.log('error')
});

 

---

Axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
쉽게 말해, 백엔드와 프론트엔드가 통신을 쉽게하기 위해 Ajax와 더불어 사용한다.
이미 JS에는 fetch api가 있지만, 프레임워크에서 Ajax를 구현할땐 Axios를 쓰는 편이라고 보면 된다.

 

Axios 특징

• 운영환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용
• Promise(ES6) API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON형태로 자동 변경

 

Axios vs Ajax

Axios	fetch
써드파티 라이브러리로 설치 필요	현대 브라우저에 빌트인, 설치 필요 없다
XSRF 보호를 해준다.	별도 보호 없음
data 속성을 사용	body 속성을 사용
data는 object를 포함한다	body는 문자열화 돼있다
status가 200이고 statusText가 'OK'이면 성공	응답객체가 ok속성을 포함하면 성공
자동으로 JSON데이터 형식으로 변환된다	.json() 메서드를 사용해야 한다
요청을 취소할 수 있고, 타임아웃을 걸 수 있다	해당 기능 존재X
HTTP 요청 가로채기 가능	기본적으로 제공X
download진행에 대해 기본적인 지원을 함	지원X
좀 더 많은 브라우저에 지원됨	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

위와 같은 표를 보았을때, axios는 별도의 설치가 필요하다는 단점이 있다. 하지만, 그것을 커버할 만한 fetch보다 많은 기능 지원과 문법이 조금이나마 간소화 된다는 장점이 있다는 것을 볼 수 있다.

 

즉, 간단하게 사용할때는 fetch 사용, 이외의 확장성을 염두했을땐 Axios를 쓰면 좋다고 보면 된다.

 

Axios 문법 구성

axios({
  url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  method: 'get', // 통신할 방식
  data: { // 인자로 보낼 데이터
    foo: 'diary'
  }
});
Copy

 

Axios 요청(request) 파라미터 옵션 (다른 옵션들도 많지만 주로 많이 쓰이는 것들만 정리)

• method : 요청방식(get이 디폴트)
• url : 서버주소
• baseURL : url을 상대경로로 쓸때 url 맨 앞에 붙는 주소
  ex) url이 /post이고 baseURL이 https://domain.com/api/이면, https://domain.com/api/post로 요청 가게 된다.
• headers : 요청 헤더
• data : 요청 방식이 PUT, POST, PATCH 에 해당하는 경우 body에 보내는 데이터
• params : URL 파라미터( ?key=value로 요청하는 url get 방식을 객체로 표현한 것)
• responseType : 서버가 응답해주는 데이터의 타입 지정
• withCredentials : cross-site access-control 요청을 허용 유무. 이를 true로 하면 cross-origin으로 쿠키값을 전달 할 수 있다.

/* axios 파라미터 문법 예시 */

axios({
    method: "get", // 통신 방식
    url: "www.naver.com", // 서버
    headers: {'X-Requested-With': 'XMLHttpRequest'} // 요청 헤더 설정
    params: { api_key: "1234", langualge: "en" }, // ?파라미터를 전달
    responseType: 'json', // default
    
    maxContentLength: 2000, // http 응답 내용의 max 사이즈
    validateStatus: function (status) {
      return status >= 200 && status < 300; // default
    }, // HTTP응답 상태 코드에 대해 promise의 반환 값이 resolve 또는 reject 할지 지정
    proxy: {
      host: '127.0.0.1',
      port: 9000,
      auth: {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
    }, // proxy서버의 hostname과 port를 정의
    maxRedirects: 5, // node.js에서 사용되는 리다이렉트 최대치를 지정
    httpsAgent: new https.Agent({ keepAlive: true }), // node.js에서 https를 요청을 할때 사용자 정의 agent를 정의
})
.then(function (response) {
    // response Action
});

 

 Axios 응답(response) 데이터

axios를 통해 요청을 서버에게 보내면, 서버에서 처리를 하고 다시 데이터를 클라이언트에 응답하게 된다.

이를 .then으로 함수인자로 받아 객체에 담긴 데이터가 바로 응답 데이터이다.

 

ajax를 통해 서버로부터 받는 응답의 정보는 다음과 같다

axios({
    method: "get", // 통신 방식
    url: "www.naver.com", // 서버
})
.then(function(response) {
  console.log(response.data)
  console.log(response.status)
  console.log(response.statusText)
  console.log(response.headers)
  console.log(response.config)
})

response.data: {}, // 서버가 제공한 응답(데이터)

response.status: 200, // `status`는 서버 응답의 HTTP 상태 코드

response.statusText: 'OK',  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지

response.headers: {},  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공

response.config: {}, // `config`는 요청에 대해 `axios`에 설정된 구성(config)

response.request: {}
// `request`는 응답을 생성한 요청
// 브라우저: XMLHttpRequest 인스턴스
// Node.js: ClientRequest 인스턴스(리디렉션)

 

Axios와 CRUD

CRUD = Create Read Update Delete, 기본적인 데이터 조작 방식

 

CRUD와 HTTP Method 매치

• Create 생성 = POST
• Read 조회 = GET
• Update 수정 = PUT
• Delete 삭제 = DELETE

---

GET

형태 => axios.get(url)
입력한 url에 존재하는 자원에 요청을 한다.

 

POST

형태 => axios.post(url, data 객체)
then()으로 post가 성공했을 때 response객체를 받아와서 data를 추출한다.
response객체에는 status정보와 data정보 등이 있다.

axios.post(url, data 객체)

.then( response => {

    if (response.status == 200){
        console.log(response.data)
}})

 

PUT

형태 => axios.put(url, data 객체)
REST기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용된다.
PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.

 

DELETE

형태 => axios.delete(url)
REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.
Delete 메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에
두번째 인자를 아예 전달하지 않는다.

 

---

참조

https://velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0

Axios란? / Axios 사용 및 서버 통신 해보기!

https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9