[AXIOS]axios API

fetch와 비슷한 역할을 하는 라이브러리

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

Axios

써디파티 라이브러리로 설치 필요
자동을 JSON데이터 형식으로 변환

Fetch API

빌티은 API, 설치 불필요
.json() 메서드 사용

사용법

• npm install axios

---

GET 요청(url, [option])

정보를 요청하기 위해 사용

axios.get("url"[,config])

• Fetch API GET 형태

// Promise
fetch("URL", { method: "GET" })
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

// Async / Await
async function request() {
  const response = await fetch("URL", {
    method: "GET",
  });
  const data = await response.json();
  console.log(data);
}

request();

• Axios GET 형태

// Promise

// axios를 사용하기 위해서는 설치한 axios를 불러와야 합니다.
import axios from "axios";

axios
  .get("URL")
  .then((response) => {
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));

// Async / Await ver

import axios from "axios";

async function request() {
  const response = await axios.get("URL");
  const { data } = response;
  console.log(data);
}

request();

---

POST 요청(url, [option])

서버에 데이터를 보내기 위해 사용

axios.post("url"[, data[, config]])

• Fetch API POST 형태

// Promise

fetch("URL", {
  method: "POST",
  headers: {
    // JSON 형식의 데이터를 보낸다고 서버에 알림
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ name: "DK", age: 29 }),
})
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

// Async / Await

async function request() {
  const response = await fetch("URL", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ name: "DK", age: 29 }),
  });
  const data = await response.json();
  console.log(data);
}

request();

• Axios POST 형태

// Promise

import axios from "axios";

axios
  .post("URL", { name: "DK", age: 29 })
  .then((response) => {
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));

// Async / Await

async function request() {
  const response = await axios.post("URL", {
    name: "DK",
    age: 29,
  });
  const { data } = response;
  console.log(data);
}

request();