FormData

HTML form 태그의 데이터를 동적으로 제어할수 있는 기능이다. 주로 AJAX와 함께 사용된다 먼저 FormData 생성자로 FormData 객체를 만든다 .다음 코드를 한줄식 Console 탭에 입력한다.

 

<script>
  const formData = new FormData();
  formData.append('name', 'zerocho');
  formData.append('item', 'orange');
  formData.append('item', 'melon');
  formData.has('item'); // true
  formData.has('money'); // false;
  formData.get('item');// orange
  formData.getAll('item'); // ['orange', 'melon'];
  formData.append('test', ['hi', 'zero']);
  formData.get('test'); // hi, zero
  formData.delete('test');
  formData.get('test'); // null
  formData.set('item', 'apple');
  formData.getAll('item'); // ['apple'];
</script>

 

생성된 객체의 append 매서드로 키-값 형식의 데이터를 저장할수 있습니다.

 

append 메서드를 여러번 사용해서 키 하나에 여러개의 값을 추가해도 됩니다.

has 메서드는 주어진 키에 해당하는 값이 있는지 여부를 알리고 get 메서드는 주어진 키에 해당하는 값 하나를 가져오고 getALL 메서드는 해당하는 모든 값을 가져온다.

 

delete 메서드는 현재 키를 제거하는 메서드고 set은 현재 키를 수정하는 메서드다.

 

 

 

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

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

 

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