AJAX

 

AJAX ?

• javascript 를 사용한 비동기 통신 
• 브라우저가 가지고 있는 HttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
• 라이브러리 : axios , fetch, request ....

 

나는 React 에서 axios 를 사용했기 때문에 axios 에 대해 정리하고자 한다.

 

axios

• Promise 기반 -> async / await 문법 사용하여 XMLHttpRequest 요청 쉽게 할 수 있다.
• 브라우저와 Node.js 에서 동일하게 사용가능
• 사용이 간편하다. ( npm 설치 / cdn 불러서 사용)
• 요청 성공 시 then() 함수로 이동, 실패 할 경우 catch() 로 이동한다.

 

 

HTTP 요청 방식

axios({
  url: 'https://test/api/cafe/list/today',
  method: 'get',
  data: {
    foo: 'diary'
  }
});

 

- method 분리 시

1) GET 방식

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2) POST 방식 

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.post(url,body, options);

 

요청 결과 response 로 받아온다.

- response 형식

{
// data 는 서버에서 반환한 데이터입니다.
data: {},
// status 는 서버에서 반환한 HTTP 상태입니다
status: 200,
// statusText 는 HTTP 상태 메시지입니다
statusText: 'OK',
// headers 는 서버에서 반환한 헤더값입니다
headers: {},
// config 는 axios 요청시 전달했던 설정값입니다
config: {}
}