[Vue] API 설정 공통화_ axios.create()

API 설정 공통화

 

기존 url전체 로컬호스트 3000을 바라보는 반복되는 url 소스를 각각 연결하게되는데

// 회원가입 api함수
function registerUser(userData) {
  const url = 'http://localhost:3000/signup';
  return axios.post(url, userData);
}

// 로그인 api함수
function loginUser() {
  const url = 'http://localhost:3000/login';
  return axios.post(url);
}

하나의 엔드포인트를 바라보는 상황에서

로컬호스트 서버 url을 공통화한 후 환경변수 파일을 설정해준다. 

 

AxiosRequestConfig 공통설정은 axios.create({ })  안에 넣어준다. 

url api 공통화 처리 (instance에 모두 담아서 처리)

// url 공통화
// 요청할때 공통설정들을 모두 넣을수 있다.
const instance = axios.create({
  baseURL: 'http://localhost:3000/',
});

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