Улучшаем работу с FormData
 

Случайно обнаружил, что при использовании FormData в браузере Chrome эти объекты почему-то не нормально отображаются в консоли.
Например, делаем так:

let formData = new FormData();
formData.append('test', 'ololo');
formData.append('ID', '666');
console.info('formData == ' + formData);
console.info('formData ~>', formData);
console.info('formData << ' + formData.toSource());

А в выводе консоли получаем такое безобразие:
Хотя на самом-то деле сами объекты нормальные/корректные и содержат все наши добавленные данные.
И тогда я стал добавлять такой финт:

formData.toString = function() {
  let r = {};
  for (let e of this.entries()) {
    if (r[e[0]]) {
      r[e[0]].push(e[1]);
    } else {
      r[e[0]] = [e[1]];
    };
  };
  return JSON.stringify(r, null, '\t');
};

Становится явно лучше. Но однажды я столкнулся ещё с тем, что передаю FormData через POST запрос XMLHttpRequest, а оно берёт и не работает.
Сперва даже растерялся - всё же верно, фрагмент простейший, ошибок не может быть, просто негде. Но вскоре заметил, что вместо ожидаемого "test=ololo&ID=666" передаётся какая-то полная чушь.
Поэтому я сделал ещё такую заплатку:

formData.toSource = function() {
  let r = '';
  for (let e of this.entries()) {
    if (r.length > 0)
      r += '&';
    r += e[0] + '=' + encodeURIComponent(e[1]);
  };
  return r;
};

Теперь, если что, я могу передавать в send() не сам formData, а например formData.toSource(). Вывод консоли теперь получается такой:

А однажды у меня появилась необходимость делать ряд асинхронных запросов, с похожими FormData (отличались парой значений).
Не знаю что на меня нашло, но я объявил единый "шаблон" и стал тупо передавать его в функции (а те меняли/добавляли параметры и отправляли).
Разумеется огрёб кучу неполадок. Надо ж было шаблон клонировать, а не его же самого передавать!:

formData.clone = function() {
  let clone = new FormData();
  for (let e of this.entries()) {
    clone.append(e[0], e[1]);
  };
  return clone;
};

И разумеется это всё можно засунуть в "prototype":

FormData.prototype.toString = function() {
  let r = {};
  for (let e of this.entries()) {
    if (r[e[0]]) {
      r[e[0]].push(e[1]);
    } else {
      r[e[0]] = [e[1]];
    };
  };
  return JSON.stringify(r, null, '\t');
};
FormData.prototype.toSource = function() {
  let r = '';
  for (let e of this.entries()) {
    if (r.length > 0)
      r += '&';
    r += e[0] + '=' + encodeURIComponent(e[1]);
  };
  return r;
};
FormData.prototype.clone = function() {
  let clone = new FormData();
  for (let e of this.entries()) {
    clone.append(e[0], e[1]);
  };
  return clone;
};

//TODO: Далее думаю было бы неплохо ещё сделать чтоб параметры и значения можно было хранить и подгружать в виде объектов, типа:

let defaultParams = {
  'test': 'ololo',
  'ID': '666'
};
let formData = new FormData();
formData.addParams(defaultParams);

Стоит учитывать, что FormData — контейнерный тип, который условно можно представить так — FormData<String, String | Blob>. Это интерфейс для работы с данными формы, было бы странно, если бы он тянул за собой всевозможные парсеры для отображения/проигрывания файлов в консоли. Вы можете взглянуть на то, что перечисляет итератор для представителей класса FormData

console.log("form data", ...formData);

Взяли и неожиданно закрыли работу с файлами.

Это (toString и toSource) совершенно бессмысленные костыли, которые к тому же не правильно работают.


Вы выбрали не тот инструмент, как я понял, если вам не нужна работа с файлами, то используйте URLSearchParams

var defaultParams = {
	test: "ololo",
	ID: "666"
};
var params = new URLSearchParams(defaultParams);
alert(params.toString());

var defaultParams = "test=ololo&ID=666";
var params = new URLSearchParams(defaultParams);
alert(params.toString());

клонирование

var params = new URLSearchParams({
	test: "ololo",
	ID: "666"
});

var params2 = new URLSearchParams(params);
params2.set("ID", "777");

alert(params2.toString());

У меня FormData и XMLHttpRequest. FormData не отображается через console.log(). Никак. Пустота.
Кладу туда append('ID', '666') и ещё десяток значений - через console.log() всё равно пустота.
На форумах куча людей мучаются, потому что думают мол append() не работает, а он как раз работает.
Ничего я не закрывал. Вывода вообще никакого не было, теперь есть. Файлы отобразятся как "" - а раньше вообще не было видно их наличия.
Работают правильно. Смысл я объяснил вроде.

(async () => {
	const image = await fetch("https://placeimg.com/64/48/any", {
		mode: "no-cors"
	}).then(response => response.blob());

	const formData = new FormData();
	formData.append("id", "666");
	formData.append("image", image);

	console.log(formData);
	console.log(...formData);
	console.table([...formData]);

	return formData;
})();

Если что, то оно так выглядит — не пусто!