[vue3-axios] 01. axios 기본 api

이번 포스트에서는 ajax 처리를 위한 axios라는 것에 대해 살펴보자.

 

axios

 

axios란?

axios는 내부적으로 XMLHttpRequest객체를 이용한 비동기 처리 라이브러리이다. axios를 fetch api와 마찬가지로 Promise 기반이라 fetch api를 써본 경험이 있다면 전혀 어렵지 않게 사용 가능하다.

https://goodteacher.tistory.com/540

[javascript]fetch api

 

설치

npm 기반으로 axios를 설치하기 위해서는 npm을 활용할 수 있다.

npm install axios

설치 결과 package.json 파일에 axios가 추가되었다면 성공이다.

"dependencies": {
    "axios": "^1.5.0",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
},

 

기본 API

 

기본 api

기본적인 axios 함수들을 살펴보자.

axios(config_obj)
axios(url, config_obj)

axios.get(url [, config_obj])
axios.delete(url [, config_obj])
axios.post(url [, [data, [config_obj]])
axios.put(url [, [data, [config_obj]])

맨 처음 함수가 가장 기본적인 함수이고 나머지 함수들은 좀 더 편하게 사용해보기 위한 편의 함수들로 get/post/delete/put 등 http method에 따라 준비되어있다.

각 함수는 config_obj를 파라미터로 받아서 동작하는데 이 객체에 url, method를 포함해서 작성할 수도 있고 아니면 최소한의 정보만 유지한체 세분화된 편의 함수들을 사용해도 상관 없다.

요청 config_obj

axios 함수의 config_obj는 다양한 설정이 가능하다. (https://axios-http.com/kr/docs/req_config) 하지만 일반적으로 사용되는 속성들은 아래 정도로 뽑아볼 수 있다.

let axios = axios({
    url: "./food.json", // 호출할 서버의 경로

    method: "get", // 사용하는 http method(post, get, put, delete)로 default는 get

    params: {
        name: "hong"
    }, // url 즉 쿼리스트링을 구성하는 파라미터 요소(get, delete, put에서 사용)

    data: {
        age: 10,
        addr: "seoul"
    }, // request body를 통해서 서버로 전송되는 값(post, put, patch에서 사용)

    headers: {'X-Requested-With': 'XMLHttpRequest'}, // 사용자 지정 헤더
});

get, delete, put에서 사용하는 params는 따로 선언하지 않고 url에 query string으로 붙여도 무관하지만 params를 활용하는 것이 여러 상황에서 조금 깔끔하긴 하다.

data 즉 request body로 전달되는 값은 그냥 JSON을 사용하면 된다. fetch api에서는 JSON.stringify로 직렬화 해야 하는데 좀 더 편해졌다.

 

응답 객체

응답 객체는 요청이 성공했을 때 then 콜백에 전달되는 객체이다. 이 객체는 다음과 같은 주요 속성을 갖는다.

{
  // 서버가 출력한 값은 언제나 data 속성 안에 존재한다.
  data: {},
  // HTTP status code
  status: 200,
  // HTTP status message from the server response
  statusText: 'OK',
  // `headers` the headers that the server responded with All header names are lower cased
  headers: {},
  // `config` is the config that was provided to `axios` for the request
  config: {},
}

역시나 가장 중요한 정보는 서버에서 응답한 데이터가 담긴 data 속성이다. fetch는 서버의 응답을 다시 toJson() 등의 메서드로 변환해서 사용해야 하는데 역시 훨씬 간단하다.

이제 jsonplaceholder에서 제공하는 api를 이용해서 ajax 호출을 테스트 해보자.

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

get

get 방식의 요청은 config_obj에 url만 있으면 된다. method 속성은 get이 기본이므로 생략해도 무방하다.

import axios from "axios";
const get = (e) => {
  axios({
    url: "https://jsonplaceholder.typicode.com/posts/1",
   // method: "get",
  }).then((response) => {
    // 상태 코드에 따른 동작 처리
    if(response.status==200){
      console.log(response.data)
    }
  }).catch((e)=>{
    // AxiosError
    console.log(`${e.name}(${e.code}): ${e.message})`)
  });
};

axios는 promise이기 때문에 then/catch 문장을 이용해서 ajax를 사용할 수 있다.

요청이 성공했을 때 then에 전달되는 Response 객체에는 상태코드(status)와 실제 데이터(data)가 전달된다. 요청이 실패했을 때는 catch 에 전달되는 error에는 name, code, message 등 정보를 얻을 수 있다.

 

post

post는 config_obj에 서버로 전달할 데이터를 data라는 속성으로 설정해주면 된다. 여기서는 async - await 구조로 사용해보자.

const post = async () => {
  try {
    const response = await axios.post("https://jsonplaceholder.typicode.com/posts", {
      title: "foo",
      body: "bar",
      userId: 1,
    });
    // 201: created
    if (response.status == 201) {
      console.log(response.status, response.data);
    }
  } catch (e) {
    console.log(`${e.name}(${e.code}): ${e.message})`);
  }
};