Jeśli mamy formularz HTML, to wprowadzone dane mogą być przechowywane w obiekcie, który jest tworzony z FormDatainstancji.

W tym artykule przyjrzymy się, jak sprawdzić obiekt utworzony z FormDatakonstruktora.

Pętla for-of z wpisami Metoda

Możemy użyć pętli for-of, aby przejść przez pary klucz-wartość FormDatainstancji w celu sprawdzenia ich wartości.

Aby uzyskać pary klucz-wartość, możemy użyć entriesmetody FormDatainstancji, aby zwrócić pary klucz-wartość w tablicy.

Na przykład możemy napisać:

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
for (const [key, value] of formData.entries()) {
  console.log(key, value);
}

key1 value1
key2 value2

Następnie wywołujemy odpowiednio appendz kluczem i wartością, aby dodać wpis do formDataobiektu.

Następnie wywołujemy, formData.entriesaby zwrócić tablicę z parami klucz-wartość w tablicy.

W pętli for-of destrukturyzujemy pary klucz-wartość i logujemy je za pomocą console.log.

Pomiń wpisy Metoda

Możemy pominąć tę entriesmetodę, ponieważ formDatajest to obiekt iterowalny.

Ma iterator zwracający pary klucz-wartość.

Dlatego możemy go skrócić do:

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
for (const [key, value] of formData) {
  console.log(key, value);
}

Możemy również wykorzystać Object.fromEntriespary klucz-wartość do obiektu, który możemy łatwo sprawdzić.

Działa to, ponieważ FormDatainstancja ma iterator, który zwraca w tablicy tablice par klucz-wartość.

Na przykład możemy napisać:

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
console.log(Object.fromEntries(formData))

{key1: "value1", key2: "value2"}

Korzystanie z konstruktora odpowiedzi

Możemy użyć Responsekonstruktora, aby przekonwertować FormDatainstancję na tekst, który możemy łatwo sprawdzić.

Na przykład możemy napisać:

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
(async () => {
  const text = await new Response(formData).text()
  console.log(text)
})()

To textjest coś takiego:

------WebKitFormBoundaryzCHPG30oZJEPIn1B
Content-Disposition: form-data; name="key1"
value1
------WebKitFormBoundaryzCHPG30oZJEPIn1B
Content-Disposition: form-data; name="key2"
value2
------WebKitFormBoundaryzCHPG30oZJEPIn1B--

Wniosek

Istnieje kilka sposobów sprawdzenia FormDatainstancji.

Jest to obiekt iterowalny, więc możemy użyć z nim pętli for-of.

Możemy również przekonwertować go na Responseinstancję i użyć textmetody do jego sprawdzenia.

Więcej treści na plainenglish.io