오늘의공부(22.0811)

조지성·2022년 8월 11일
0

TIL

목록 보기
68/78
post-thumbnail

서버 데이터 바인딩 실습

Axios

  • 서버와 데이터를 송수신 할 수 있는 HTTP 비동기 통신 라이브러리
  • Promise 객체 형태로 값을 return
  • 구형 브라우저도 지원
  • 응답 시간 설정을 통해 네트워크 에러가 발생했을 때 정해진 응답 시간을 초과 하면 해당 요청을 종료시킬 수 있다.

Axios request method

서버와 통신 시 현재 통신하는 목적이 무엇인지 명확하게 전달하기 위해 여러가지 request method가 존재

  • axios.request
  • axios.get
  • axios.delete
  • axios.head
  • axios.options
  • axios.post
  • axios.put
  • axios.patch

Mixins

  • 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');
    

Postman을 통한 데이터 호출

<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>
profile
초보 개발자의 성장기💻

0개의 댓글