API 공동 모듈화 하기

코드가 복잡해지고 많아지면, api요청이 많아지면 매 코드 마다 라이브라리에 의존하게 된다.
상황이 바껴서 라이브러리를 바꿀때에는 하드코딩된 부분을 바꿔야 하게 되기 때문에 의존적인 코드를 최소화하자.
axios를 호출하는 코드를 별도로 만들어 주는 방법을 사용해 보자.

import axios from 'axios';

const DOMAIN = 'http://localhost:3000';
const UNAUTHORIZED = 401;
const onUnauthorized = () => {
    router.push('/login')
}

const request = (method, url, data) => {
    return axios({
        method,
        url: DOMAIN + url,
        data
    }).then(result => result.data)
      .catch(result => {
        const {status} = result.response
        if(status === UNAUTHORIZED) return onUnauthorized()
        throw Error(result)
      })
}

export const board = {
    fetch () {
        return request ('get', '/board')
    }
}

api.js

 

import { board } API from '../API'

export default {
  data(){
      return {
          loading: false,
          boards : '',
          error : ''
      }
  },
  created(){
      this.fetchData();
  },
  methods:{
      this.loading = true
      board.fetch()
        .then(data => {
            this.boards = data
        })
        .finally ({
            this.loading = false
        })
   }
}
	

VUE 예시 board.js