Regarding on a HTTP request using 'Axios'

'요청'과 '응답' 관련 질문을 받았는데 가물가물한 기억을 붙잡고 대답해 나가는 '나'를 또 마주하기 싫어 하는 정리.

HTTP?

  HTTP는 TCP/IP를 기반으로 하는 프로토콜로 데이터(HTML files, image files, query result, etc)를 'World Wide Web'을 통해 보내기 위해 사용된다. 컴퓨터들간에 이사소통을 하게 해주는 표준화된 방식으로 '요청' 데이터는 클라이언트 측에서 서버 측으로, '응답'은 서버 측에서 클라이언트 측으로 전달된다.

  HTTP 클라이언트는 method, URI, 그리고 protocol version 등을 포함한 형식을 웹 서버에게 보내는 데, 이를 '요청, request'라 한다. HTTP 서버는 protocol version과 success or error code를 포함한 상태라인을 가진 응답을 보내는데, 이를 '응답, response'라 한다.

HTTP Requests using Axios

// 자그마치 4달 전에 날렸던 요청 코드

const connect = () => {
    const token = sessionStorage.getItem("access_token");
    axios({
      url: `${ajaxUrl}/order/ordersview`, // from "../../ajax/api";
      method: "post", 
      headers: {
        Authorization: token
      },
      data: {
        order_status: "1",
      }
    })
      .then(res => {
        console.log("res.data", res.data);
 
      })
      .catch(res => {
        console.log("error");
      });

Axios 란?

: HTTP 요청을 보낼 때 사용되는 자바스크립트의 라이브러리로 브라우저와 Node.js 환경에서 사용된다. 'promise' 기반이지만 'async/await'로도 표현가능하며, 간단하게 표현가능 해 활용가능성이 높다.

그 외에 Fetch api보다 더 많은 이점이 있다.

• 모든 브라우저에서 호환이 가능하다. (fetch는 'polyfill'이 필요)
• 요청 중단 가능
• 응답의 time을 설정할 수 있음
• 자동으로 JSON 데이터를 변환
• CSRF 보호 내장 (CSRF, Cross-Site Request Forgery, 공격에 대응하는)
• 요청 진행 상황을 모니터링 가능
• Node.js에서 사용 가능

Axios 설치

• Node.js의 'npm'을 이용해 설치 가능

npm install axios

• 브라우저 상에서 'unpkg.com:'을 첨부해서도 가능

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

'request' 하기

아주 간략하게 axios를 이용해 request form 만들기. axios 객체는 반드시 url을 프로퍼티를 포함해야 하며, 메소드가 정해지지 않으면 get이 기본 값으로 설정됨.

// send a POST request
axios({
  method: 'post', // data의 객체 데이터를 담아 서버측에 보낸다
  url: '/login', // /login 으로
  data: { // data를 JSON 형태로 자동변환해 request body에 담아 보냄. 
    user: 'aaronddy',
    password: '1111'
  }
});

'axios.request(config)' 형태로 더 간단하게 표현이 가능, request 부분에 여러 타입의 methods를 넣어 축약시킬 수 있다.

• axios.get(url[, config])
• axios.delete(url[, config])
• axios.post(url[, config])
• axios.out(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])

축약 형태를 이용해 표현하면 다음과 같다.

axios.post('/login', { //post method를 써서 '/login'url에 데이터 정보를 담아 요청
  user: 'aaronddy', 
  password: '1111'
});

promise로 'response' 대응하기

HTTP 요청이 만들어지면 서버측에서 그 요청에 대해 이행을 하든 거절을 하든 '응답'을 보내게 된다. 그 응답에 대응하기 위해 promise의 then() 메소드를 이용할 수 있다. 여기서 대응이란 응답을 받아 그 다음 액션으로 어떻게 할지를 결정하기 위해 진행 상황을 파악하고자 하는 것이다.

axios.post('/login', {
  user: 'aaronddy',
  password: '1111'
})
.then((response) => { // 요청에 대해 이행을 하면
  console.log(response); // 그 응답을 콘솔로 띄우고
}, (error) => { // 거절하면
  console.log(error); // 에러를 콘솔로 띄운다.
});

요청에 대한 응답은 다음과 같은 구조의 정보를 포함하고 있다.

{
  // `data`는 서버측에서 받은 응답
  data: {},
 
  // `status`는 서버의 응답으로 받은 HTTP 상태 코드
  status: 200,
 
  // `statusText`는 서버의 응답으로 받은 HTTP 상태 메시지
  statusText: 'OK',
 
  // `headers`는 소문자로 표기되며 서버로 응답받은 것.
  headers: {},
 
  // `config`는 axios의 요청으로 받은 것.
  config: {},
 
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance in the browser
  request: {}
}

예시

• GitHub API로부터 받은 요청에 대한 응답 데이터는 다음과 같다.

axios.get('https://api.github.com/users/mapbox')
  .then((response) => {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

// logs:
// => {login: "mapbox", id: 600935, node_id: "MDEyOk9yZ2FuaXphdGlvbjYwMDkzNQ==", avatar_url: "https://avatars1.githubusercontent.com/u/600935?v=4", gravatar_id: "", …}
// => 200
// => OK
// => {x-ratelimit-limit: "60", x-github-media-type: "github.v3", x-ratelimit-remaining: "60", last-modified: "Wed, 01 Aug 2018 02:50:03 GMT", etag: "W/"3062389570cc468e0b474db27046e8c9"", …}
// => {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}

==============================================================
reference:
http://zetcode.com/javascript/axios/
https://flaviocopes.com/axios/
https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/
https://www.npmjs.com/package/axios#response-schema
https://www.it-swarm.dev/ko/javascript/es6-%EC%9D%B8%EC%B6%9C-%EB%8C%80%EC%8B%A0%EC%97%90-axios%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0%EA%B0%80-%EC%9E%88%EC%8A%B5%EB%8B%88%EA%B9%8C/838589868/