Показать сообщение отдельно
  #1 (permalink)  
Старый 19.11.2018, 16:33
Аспирант
Отправить личное сообщение для Svorg Посмотреть профиль Найти все сообщения от Svorg
 
Регистрация: 16.11.2018
Сообщений: 38

Улучшаем работу с 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 == [object FormData]
formData ~> FormData {}
Uncaught TypeError: formData.toSource is not a function
Хотя на самом-то деле сами объекты нормальные/корректные и содержат все наши добавленные данные.
И тогда я стал добавлять такой финт:
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 == { "test": [ "ololo" ], "ID": [ "666" ] }
formData ~> FormData {}
formData << test=ololo&ID=666

А однажды у меня появилась необходимость делать ряд асинхронных запросов, с похожими 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);
Ответить с цитированием