[project] Axios instance사용하기

웹사이트에서 axios를 사용하는 경우가 많다. 이때 axios instance를 만들어 반복되는 config를 줄일 수 있다👍

📍 axios란?
Axios란 브라우저와 node.js용 promise기반 HTTP client이다. 서버 측에서는 기본 node.js모듈을 사용하고 클라이언트에서는 XMLHttpRequests를 사용한다.

📍 XMLHttpRequest란?
서버와 상호작용하는 개체이다. URL에서 데이터를 검색할 수 있는데, 이때 전페 페이지를 새로고치지 않고, 페이지 일부만 업데이트 할 수 있다.

📍 axios의 특징

• 브라우저에서 XMLHttpRequest를 만든다.
• Promise http를 요청한다.
• 요청과 응답을 가로챌 수 있다.
• HTML 양식을 JSON으로 게시하고, 응답을 받으면 자동으로 JSON 데이터 처리를한다.

📍 설치방법

npm install axios

📍 axios 요청 방법
1. axios(config)

axios({
	method:'post',
    url:'/user',
    data : {
    	firstname:'choi'
        lastName:'hy'
    }
})

2. axios(url[,config])

	axios('/user'); //get
    
    

3. aliases

axios.request(config)
axios.get(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])

alias를 사용할때, url과 method와 data는 특성을 지정하지 않아줘도 된다.

📍 axios instance

instance를 만들어보자. config를 custom하여 axios instance를 만들 수 있다.
반복되는 주소부분을 baseURL로 설정하고, 공통으로 작성될 header 등등 반복되는 구성을 설정한다.
axios.create([config])

const instance = axios.create({
	baseURL:'베이스가 될 주소',
    header : {'Content-Type': 'application/json'}
})

//사용
const {data} = instance.get('/user',{params})

instance 메서드를 참고하여 사용할 수 있다!
instance mothod

• axios#get(url[,config])
• axios#post(url[,data[,config]])
• axios#put(url[,data[,config]])
  config중 params는 url에 전달될 매개변수이다.

프로젝트에서는 도서 검색 결과를 받아오기 위해 query와 함께 get요청을 했다.

const BASE_URL = "https://dapi.kakao.com";

const authAPI = () => {
  const token = process.env.REACT_APP_KAKAO_KEY;
  return axios.create({
    baseURL: BASE_URL,
    headers: {
      Authorization: `KakaoAK ${token}`,
    },
  });
};

export const authInstance = authAPI();

export const getBook = async (params: queryType) => {
  try {
    const { data } = await authInstance.get("/v3/search/book", { params });
    return data;
  } catch (error) {
    console.log(error);
  }
};

export const bookSearchHandler = async (
  query: string,
  sort: string,
  page: number
) => {
  const params = {
    query: query,
    sort: sort,
    page: page,
    size: 12,
  };
  const data = await getBook(params);
  return data;
};

✏ 참고사이트
https://axios-http.com/docs/intro