[Vue] 6장(완) API 통신

1. Vue API 통신

Vue에서 API 통신을 하기 위해 주로 axios 라이브러리를 사용합니다. 아래는 Vue에서 axios를 사용해 API와 통신하는 기본적입 방법입니다. 먼저 프로젝트에 axios라이브러리를 설치해줍니다.

npm install axios && yarn add axios

---

2. API 호출 예제

다음은 Vue 컴포넌트에서 API를 호출합니다.

<template>
  <div class="api-wrapper">
    <h1>API 데이터</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: [],
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get(
          'https://jsonplaceholder.typicode.com/users'
        )
        this.items = response.data
      } catch (error) {
        console.error('API 호출 중 에러가 발생했습니다.', error)
      }
    },
  },
}
</script>

<style scope>
ul {
  list-style-type: none;
  display: flex;
  padding: 20px;
}

.api-wrapper {
  width: 100%;
  margin: auto;
  max-width: 1300px;
}
</style>

---

 

GitHub - Koras02/vue-tutorial: https://thinky.tistory.com/category/Front-End/VueJS