서버와 통신 시 현재 통신하는 목적이 무엇인지 명확하게 전달하기 위해 여러가지 request method가 존재
Mixins를 이용해서 공통함수를 구현해서 각각의 컴포넌트에서 호출해서 사용하는 방식으로 효율성을 높임
import axios from 'axios';
export default{
methods: {
async $api(url,method,data){
return (await axios({
method: method,
url,
data,
}).catch(e=>{console.log(e);
})).data;
}
},
}
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import mixins from './mixins'
const app = createApp(App)
app.use(router);
app.mixin(mixins);
app.mount('#app');
<template>
<div>
<table>
<thead>
<tr>
<th>제품명</th>
<th>가격</th>
<th>카테고리</th>
<th>배송료</th>
</tr>
</thead>
<tbody>
<tr :key="i" v-for="(product,i) in productList">
<td>{{product.product_name}}</td>
<td>{{product.price}}</td>
<td>{{product.category}}</td>
<td>{{product.delivery_price}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data(){
return {
productList :[],
}
},
created(){
this.getList();
},
methods: {
async getList(){
this.productList = await this.$api("https://20823d24-44d5-42ee-a4e6-d3d0b9176905.mock.pstmn.io/list","get");
}
},
}
</script>
<style >
table{
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,th{
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
</style>