API 공통화(axios)

axios 설치

 npm i axios --save

promise 기반으로 api를 제공한다.

​ new Promise()라는 객체를 반환해주고 .then.catch를 쓸수있다.

    axios.get('https://api.hnpwa.com/v0/news/1.json')
        .then(response => console.log(response))
        .catch(error => console.log(error))

API공통화

방법 1. axios 를 공통으로 사용하기위해 create 하여 빼보기

const instance = axios.create({
    baseURL : 'http://localhost:3000/'
})

function registerUser(userData){
    return instance.post('signup',userData);
}

로하면

function registerUser(userData){
    const url = 'http://localhost:3000/signup';
    axios.post(url,userData);
}

와 같은 효과를 준다.

방법2. api폴더 밑에 index.js 생성

api모듈 만들기

//1. HTTP Request & Response 관련된 기본 설정 
const config = {
    baseUrl: ....
}

//2. API 함수들을 정리
function fetchinfoList(){
    return axios.get(`${baseUrl} ... `);
}

//3. 꺼내주기 
export {
    fetchinfoList
}

tip !! import ,export

export {
    abc,
    해줘야 
}

import { abc } from xxx.js 가 가능하다.

이런식으로 export한 함수를 import해서 쓸수 있음

import { fetchinfoList } from '../api/index.js';

export default {
  created() {
    fetchinfoList()
      .then(response => console.log(response))
      .catch(error => console.log(error));
  }
}

---

created beforeMount

데이터 요청할때 위 2개를 많이 쓴다.