[React] React에서 axios로 API 호출하기

 

axios 설치하기

$ npm i axios

 

axios란?

fetch를 하는 adapter라고 보면 된다.

axios를 사용하면 await fetch, response, json 을 할 필요가 없어진다.

 

import axios from "axios"

const BASE_URL = "http://127.0.0.1:8000/api/v1"

export async function getRooms() {
    const response = await axios.get(`${BASE_URL}/rooms/`);
    return response.data;
}

axios는 reactQuery로만 fetch했을 때 했던 await fetch, response, json 등의 동작을 내부적으로 하기 때문에 위 코드로 수정해줄 수 있다.

 

실수하기 쉬운 url 부분도 axios로 바꾸기

import axios from "axios"

const instance = axios.create({
    baseURL: "http://127.0.0.1:8000/api/v1/",
})

export async function getRooms() {
    const response = await instance.get(`rooms/`);
    return response.data;
}

 

getRooms 함수 한 줄로 만들기

export const getRooms = () => instance.get("rooms/").then(response => response.data);