[JavaScript] Axios 사용하여 웹서버와 통신하기

🔽 AJAX, HTTP에 대해서는 아래 포스트를 참고해주세요 🔽

[JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await

[HTTP] API란? REST(RESTful) API란?

---

🔗 Axios란?

 

• Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
• 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다.
•  
• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP 메소드를 사용한다.
• Promise(ES6) API를 사용한다.
• 요청과 응답 데이터의 변형이 가능하다.
• HTTP 요청 취소가 가능하다.
• HTTP 요청과 응답을 JSON 형태로 자동 변경한다.

---

🔗 Axios 사용법

 

◾ Axios 설치

 

npm i axios

◾ Axios 불러오기

 

import axios from 'axios'

◾ Axios 사용하기

 

◽ HTTP 메소드

 

① GET : 서버 자원을 가져온다.
② POST : 서버에 자원을 새로 등록한다.
③ PUT : 서버 자원을 요청에 들어 있는 자원으로 바꾼다.
④ PATCH : 서버 자원을 일부 수정한다.
⑤ DELETE : 서버 자원을 삭제한다.

axios.get(url[, config])            // GET
axios.post(url[, data[, config]])   // POST
axios.put(url[, data[, config]])    // PUT
axios.patch(url[, data[, config]])  // PATCH
axios.delete(url[, config])         // DELETE

 

 

(+) Axios() vs Axios.HTTP 메소드()

 

import axios from 'axios';
 
// axios() 사용 시
 
axios({
    method:"POST",
    url: 'url 주소',
    data:{
        "email": email.value,
        "password": password.value
    }})
    .then((res) => {
        console.log(res);
    })
    .catch((error) => {
        console.log(error);
        throw new Error(error);
    });
 
// axios.post() HTTP 메소드 사용시
axios.post('url 주소', {
    "email": email.value,
    "password": password.value
    })
    .then((res) => {
        console.log(res);
    })
    .catch((error) => {
        console.log(error);
        throw new Error(error);
    });
 

 

 

---

🔎 참고 자료

• Axios란? / Axios 사용 및 서버 통신 해보기!
• API | Axios 러닝 가이드

💡 같이 보면 좋을 Post

[HTTP] API란? REST(RESTful) API란?