FormData

HTML form 태그의 데이터를 동적으로 제어할 수 있는 기능입니다. 주로 AJAX와 함께 사용됩니다.

먼저 FormData 생성자로 formData 객체를 만듭니다.

const formData = new FormData();
formData.append('name', 'zzangchae');
formData.append('item', 'purple');
formData.append('item', 'orange');
formData.has('item'); // true
formData.has('money'); // false
formData.get('item'); // purple
formData.getAll('item'); // ['purple', 'orange']';
formData.append('test', ['hi', 'zzang']);
formData.get('test');
formData.delete('test');
formData.get('test'); // null
formData.set('item', 'apple');
formData.getAll('item'); // ['apple'];

 

생성된 객체의 append 메서드로 키-값 형식의 데이터를 저장할 수 있습니다. append 메소드를 여러 번 사용해서 키 하나에 여러 개의 값을 추가해도 됩니다. has 메소드는 주어진 키에 해당하는 값이 있는지 여부를 알립니다. get 메소드 는 주어진 키에 해당하는 값 하나를 가져오고, getAll 메소드는 해당하는 모든 값을 가져옵니다.  delete 메소드는 현재 키를 제거하는  메소드고, set 현재 키를 수정하는 메소드입니다.

이제 axios로 폼 데이터를 서버에 보내면 됩니다.

(async () => {
	try {
		const formData = new FormData();
		formData.append('name', 'zzangchae');
		formData.append('birth', 2000);
 		const result = await axios.post('https://www.zzangchae.com/api/post/formdata', formData);
  		console.log(result);
  		console.log(result.data);
  	} catch (error) {
		console.error(error);
	}
})();

 

두 번째 인수에 데이터를 넣어 보냅니다. 현재 설정된 주소는 실제로 동작하는 주소라서 결괏값을 받을 있습니다.