Что делает метод response.formData внутри fetch?

Question

[zkrvndm]

В документации написано, что данный метод возвращает ответ, как объект FormData... это вообще как? o_O

Лично у меня он при тесте руками выдает ошибку:

await (await fetch('/')).formData(); // Uncaught TypeError: Failed to fetch

Но ведь так не бывает, что метод есть, но не работает! Значит я что-то не пониманию.

Итак, что делает метод response.formData внутри fetch и как правильно его использовать?

Comments

[Алексей Уколов]

Ну очевидно ведь по тексту ошибки, что до formData() дело не доходит и падает ещё на fetch(), разве нет?

[zkrvndm]

Алексей Уколов, нет, запрос уходит, если использовать метод .text() вместо .formData() то и ответ получаю.

Answer 1

[Алексей Уколов]

Итак, что делает метод response.formData внутри fetch? Подскажите, кто знает, как его правильно применять.

Всё написано же в документации:

The formData() method of the Response interface takes a Response stream and reads it to completion. It returns a promise that resolves with a FormData object.
Note: This is mainly relevant to service workers. If a user submits a form and a service worker intercepts the request, you could for example call formData() on it to obtain a key-value map, modify some fields, then send the form onwards to the server (or use it locally).

https://developer.mozilla.org/en-US/docs/Web/API/R...

Это ответ на будущее для тех, кто попадёт в вопрос по его заголовку из поиска, поскольку zkrvndm на самом деле хотел спросить "почему у меня не работает", а не "что делает метод formData.

Comments

[zkrvndm]

Мне вообще ничего не говорит толкование в документации. Я по прежнему не понимаю, как эта хрень должна работать и зачем она нужна. Да и вообще, как это возможно html документ из ответа представить в виде FormData? Или я неправильно понимаю и этот метод не для чтения ответа, а для чтения отправляемых данных? Поясните кто-нибудь, плиз.

[Stalker_RED]

zkrvndm, вот же один абзац текста, который все объясняет. Ну вставьте его в гугл-транслейт, если непонятно. Там вообще ни слова про html-документ, это вы сами фантазируете, а потом спорите со своей фантазией.

[Rsa97]

zkrvndm, Английским по белому же написано. Метод, в основном, используется при перехвате запросов в сервис-воркерах для получения и/или изменения данных отправляемой формы.

[Алексей Уколов]

Если не понимаете, она вам и не нужна.
Разумеется, рандомный html документ в formData превратить невозможно.

Или я неправильно понимаю и этот метод не для чтения ответа, а для чтения отправляемых данных из воркера?

Можно и читать ответ, если сервер отправляет его в виде формы (так, понятное дело, никто особо не делает, потому что незачем), а можно, как сказано выше, читать и изменять данные перед отправкой внутри sw (это единственный нормальный кейс, но и он нужен нечасто).

[zkrvndm]

Rsa97, это метод доступен лишь после завершения запроса. Каким таким образом им можно что-то там перехватить и изменить, если запрос уже завершен?

[zkrvndm]

Алексей Уколов, подожди. Вот это ключевой момент который меня интересует. Если я руками на стороне сервера сформирую корректный multipart/form-data то этот метод его прочитает?

[zkrvndm]

Алексей Уколов, для теста сформировал корректрный и валидный документ multipart/form-data:

await (await fetch('https://nadim.work/form_data_test.php')).formData(); // TypeError: Could not parse content as FormData.

Но он все равно не парсится. Сам тестовый документ гарантированно валидный, делитель в Content-Type указан:

HTTP/2 200 OK
server: nginx-reuseport/1.21.1
date: Wed, 12 Jul 2023 06:18:06 GMT
content-type: multipart/form-data; boundary=---------------------------174400413723109252861051417751
content-length: 412
x-powered-by: PHP/7.4.33
x-content-type-options: nosniff
cache-control: no-store, no-cache, must-revalidate
X-Firefox-Spdy: h2

-----------------------------174400413723109252861051417751
Content-Disposition: form-data; name="raz"

Первый
-----------------------------174400413723109252861051417751
Content-Disposition: form-data; name="dva"

Второй
-----------------------------174400413723109252861051417751
Content-Disposition: form-data; name="tri"

Третий
-----------------------------174400413723109252861051417751--

Answer 2

[Rise]

Правильно так:

(async () => await (await fetch('/')).formData())();