Axios

Axios란?

---

• Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.
• 즉, 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용.

axios 특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용

• Promise(ES6) API 사용

• 요청과 응답 데이터의 변형

• HTTP 요청 취소

• HTTP 요청과 응답을 JSON 형태로 자동 변경

• Axios 다운로드

  npm i axios

• HTTP Methods

• Axios 사용해보기

  • GET
    axios.get(url,[,config])

  • 예제

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

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

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

  • PUT
    REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용됩니다.
    형태
    axios.put(url[, data[, config]])
    PUT메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아닙니다!
    PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있습니다.

  • DELETE
    REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용합니다.
    axios.delete(URL,[,config]);
    예제 코드

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

  • async await에 관해 살펴보기

  • Promise로 Axios사용해보기

  • Axios 환경 구성