웹 애플리케이션을 개발하다가 API를 통해 서버와 통신해야 할 경우가 생겼다. RESTful API의 POST요청으로 DB에 새로운 정보를 저장해야 했다. 따라서 axios 통신 모듈을 사용하여 객체 형태의 정보를 POST요청 하였다. axios.post()
의 인자로 객체 데이터를 그대로 넘겨주는 형식으로 여태 코딩을 해왔는데, WEB API로 제공하는 FormData()
를 알게 되어 기록한다.
기존에 필자가 사용하던 방식은 이렇다.
addInfo = ({name, age}) => {
return axios.post(url, {name, age})
}
addInfo({name:"홍길동", age:15}).then(...).catch(...)
또는, 데이터를 임시 변수에 저장하고 그 임시 변수를 넘겨주었다.
addInfo = ({name, age}) => {
return axios.post(url, {name, age})
}
let tempData = {name:"홍길동", age:15};
addInfo(tempData).then(...).catch(...)
더 간단하고 명료한 FormData() 사용법을 알아보자.
addInfo = ({name, age}) => {
return axios.post(url, {name, age})
}
let formData = new FormData(); // 빈 객체를 만듦.
formData.append("name", "홍길동"); // key: name value: '홍길동'
formData.append("age", "15")
addInfo(formData).then(...).catch(...)
제공하는 API를 이용하여 객체를 만드니까 더 직관적이고 명료하다.
정리하면, new FormData()를 통해 빈 객체 데이터를 만들어낼 수 있고, append()를 통해 key값과 value값이 있는 객체 데이터를 추가할 수 있다.👍