[Vue.js] 회원가입 폼 만들기(2) - api 호출

1.Axois 설치

백엔드의 api 호출을 위해 axios호출을 사용한다.

npm i axios

 

2. API 폴더 & index.js 생성

api 구조화를 위해 methods에서 작성하지 않고

 

src 폴더 밑에 api 폴더를 만들고 index.js 에서 api 호출을 하게한다.

 

index.js를 export 하는 구조로 사용하도록 한다.

 

import axios from 'axios';

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

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

export { registerUser };

 

axios url은 인스턴스를 생성하여 baseurl을 지정해두고 쓰는 방식으로 한다.

 

3. methods 에서 api 함수 호출

async submitForm() {
	
    //validation 생략

	const userData = {
		email: this.email,
		name: this.name,
		password: this.password,
		position: this.position,
		teamName: this.teamName,
	};
    
	const response = await registerUser(userData);
	if (response.status == 200) {
		alert('환영합니다.');
		this.$router.push('/login');
	} else {
		alert(response.data);
	}
},

서버에서 응답을 받기 위해 비동기 처리로 구현한다( async, await ).

 

data에 있는 변수들로 객체를 만들어서 api 함수를 호출한다.

 

코드가 200으로 오면 회원가입이 성공한 것이므로 login 페이지로 변경한다.

 

(data에 대한 validation은 별도로 필요함)