[ajax vs axios]

Ajax?
Asynchronous javascript And xml
비동기식 자바스크립트와 xml

• javascript 라이브러리 중 하나
• 자바스크립트를 통해 서버에 데이터를 요청하는 것
• 브라우저가 가지고 있는 XMLHttpRequest객체를 이용해서
  전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
• ※ 비동기 방식 : 웹 페이지를 리로드하지 않고 데이터를 불러오는 방식

 

Axios?
브라우저, Node.js를 위한 Promise(es6) API를 활용하는 HTTP비동기 통신 라이브러리

• 서버사이드에서는 네이티브 node.js의 http모듈을 사용하고
• 클라이언트(브라우저)에서는 XMLHttpRequest API 객체 사용
• 클라이언트 안에서 요청을 보냄 (axios lib 사용)
• HTTP요청 취소 및 요청과 응답을 JSON형태로 자동 변경
  • GET, POST, PUT, DELETE
    • get : 주로 데이터를 읽거나 검색하기 위해 서버측에 요청하는 형태
    • post : 클라이언트에서 서버로 전송할 때 추가적인 데이터를 body에 포함하여 요청

  • // post 요청 예시
    
    axios.post('/user', {
        firstName: 'Fred',
        lastname: 'Flintstone'
     })
     .then(function (response) {
         console.log(response);
      })
      .catch(function (error) {
          console.log(error);
      });
      
      // 여러 동시에 post 요청
      
      function getUserAccount() {
          return axios.get('/user/12345');
      }
      
      function getUserPermissions() {
          return axios.get('/user/12345/permissions');
      }
      
      Promise.all([getUserAccount(), getUserPermissions()]
         .then(function (result) {
             const acct = results[0];
             const perm = results[1];
         });

• axios 설치
  • client ) npm install axios --save

• // 활용 예시
  
  import React, { useEffect } from 'react';
  import axios from 'axios';
  
  // landingPage.js
  
  function LandingPage() {
      useEffect(() => {
          axios.get("/api/hello").then((response) => {  // ①. 서버(index.js)로 요청
              console.log(response.data);  // ③. 응답 노출 (콘솔)
          });
      }, []);
      
      
      
      // index.js
      
      app.get("/api/hello", (req, res) => {
          res.send("hello world!");  // ②. 처리 후 클라이언트로 응답
      });

 

 

[참고]

https://axios-http.com/kr/docs/intro