코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 17일차

"10장 데이터 통신하기 "
10.4 Axios로 데이터 통신하기

1. 라이브러리 설치

npm install axios

//vue.js.frontend/ch10_axios/package.json
{
  "name": "axios",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.7.2",
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }
}

2. axios() 함수의 기본 문법 형식

axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('Error', error));

config에는 method, data, headers 등 다양한 속성 사용 가능

method에는 get. post, put, patch, delete

3. 단축 문법

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

4. 뷰에서 사용하기

//vue.js.frontend/ch10_axios/src/App.vue

<script setup>
import axios from 'axios'; // axios는 이 부분이 반드시 필요함

const getData = () => {
  axios
    .get('/api/data')
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.error('데이터를 가져오던 중 에러 발생:', error);
    });
};
const postData = () => {
  axios
    .post('/api/data', {
      name: 'new data',
      description: 'sample data',
    })
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.error('데이터를 추가하던 중 에러 발생:', error);
    });
};
const putData = () => {
  axios
    .put('/api/data/1', {
      name: 'update data',
      description: 'update description',
    })
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.error('전체 데이터를 변경하던 중 에러 발생:', error);
    });
};
const patchData = () => {
  axios
    .patch('/api/data/1', {
      description: 'update description',
    })
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.error('일부 데이터를 변경하던 중 에러 발생:', error);
    });
};
</script>

<template>
  <div>
    <button @click="postData">POST</button>
    <button @click="getData">GET</button>
    <button @click="putData">PUT</button>
    <button @click="patchData">PATCH</button>
  </div>
</template>

5. async/await

//vue.js.frontend/ch10_axios/src/App.vue
<script setup>
import axios from 'axios'; // axios는 이 부분이 반드시 필요함

// async await 방식
const getData = async () => {
  try {
    const response = await axios.get('/api/data');
    console.log('async await', response.data);
  } catch (error) {
    console.log('데이터를 가져오던 중 에러 발생', error);
  }
}
// promise then 방식
/* 
const getData = () => {
  axios
    .get('/api/data')
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.error('데이터를 가져오던 중 에러 발생:', error);
    });
};
*/
const postData = () => {
  axios
    .post('/api/data', {
      name: 'new data',
      description: 'sample data',
    })
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.error('데이터를 추가하던 중 에러 발생:', error);
    });
};
const putData = () => {
  axios
    .put('/api/data/1', {
      name: 'update data',
      description: 'update description',
    })
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.error('전체 데이터를 변경하던 중 에러 발생:', error);
    });
};
const patchData = () => {
  axios
    .patch('/api/data/1', {
      description: 'update description',
    })
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.error('일부 데이터를 변경하던 중 에러 발생:', error);
    });
};
</script>

<template>
  <div>
    <button @click="postData">POST</button>
    <button @click="getData">GET</button>
    <button @click="putData">PUT</button>
    <button @click="patchData">PATCH</button>
  </div>
</template>