✅ Axios란?

• Promise 기반 비동기 API 라이브러리
• API URL의 기본 인스턴스 제작 가능

📌 axios vs fetch

• 공통점
  HTTP 프로토콜을 통해 서버와 통신하는 것

• 비교표
  
  

📌 특징

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

📌 사용법

◼ HTTP Methods

• 클라이언트가 웹 서버에게 사용자 요청의 목적/종류를 알리는 수단

GET

입력한 url에 존재하는 자원에 요청

axios.get(url,[,config])

• 용도
  • 서버에서 어떤 데이터를 가져와서 보여주는 식
    • 주소에 있는 쿼리스트링 활용해서 정보 전달
    • 값/상태 변경 불가
• 예시

// 예시 1
    import axios from 'axios';
    axios.get('https://my-json-server.typicode.com/zofqofhtltm8015/fs/user').then((Response)=>{
        console.log(Response.data);
    }).catch((Error)=>{
        console.log(Error);
    })

// 예시 1 결과
    [
      { id: 1, pw: '1234', name: 'JUST' },
      { id: 2, pw: '1234', name: 'DO' },
      { id: 3, pw: '1234', name: 'IT' }
    ]

// 예시 2
    // GET request for remote image
    axios({
      method: 'get',
      url: 'http://bit.ly/2mTM3nY',
      responseType: 'stream'
    })
      .then(function (response) {
        response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
      });

// 예시 3
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .finally(function () {
        // always executed
      });

POST

새로운 리소스를 생성(create)

      axios.post("url주소",{
    	data객체
   },[,config])

• 두 번째 인자
  • 객체 리터럴 전달 (본문으로 보낼 데이터를 설정한)
• 사용 상황
  • 사용자가 생성한 파일(로그인, 회원 가입 등)을 서버에 업로드 시
  • GET보다 안전
    • 주소창에 쿼리스트링 남지 않아서
• 사용 예제

    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });

    axios.post("url", {
            username: "",
            password: ""
        })
        .then(function (response) {
             // response  
        }).catch(function (error) {
            // 오류발생시 실행
        }).then(function() {
            // 항상 실행
        });

DELETE

REST 기반 API 프로그램에서 데이터 베이스에 저장되어 있는 내용 삭제 목적으로 사용

axios.delete(URL,[,config]);

• HTML Form 태그에서 기본 지원 HTTP 메서드 X
• 두 번째 인자 전달 X
• 예제 코드

    axios.delete("/thisisExample/list/30").then(function(response){
        console.log(response);
          }).catch(function(ex){
          throw new Error(ex)
    }

PUT

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용 갱신 목적

axios.put(url[, data[, config]])

• HTML Form 태그에서 기본 지원 HTTP 메서드 X
• 주 목적: 데이터베이스 내용 변경
• 사용 예시

    axios.put("url", {
            username: "",
            password: ""
        })
        .then(function (response) {
             // response  
        }).catch(function (error) {
            // 오류발생시 실행
        }).then(function() {
            // 항상 실행
        });