Правильно ли так делать и как лучше выполнять несколько запросов?

Question

[massef]

Пример тут https://jsfiddle.net/b0n54j7f/

Допустим есть два запроса к бэкенду
- один это сам товар, в котором вместо его названия (brand, model) указано число классификатор.
- второй собственно сам массив объектов классификаторов

1. Интересует вычисляемое свойство phonesProcessed. В котором производится поиск и сравнивание нужных значений. Можно ли это место как то оптимизировать или тут все ок?

2. Как можно объединять несколько запросов в один (метод getPhones)?

Answer 1

[0xD34F]

1. Не ок.

Во-первых - модифицируете данные компонента внутри вычисляемого свойства.
Во-вторых - а что если количество свойств товара увеличится? Опять будете копипастить?

Исправляем:

phonesProcessed() {
  const classes = Object.fromEntries(this.classes.map(({ classinfoName: c, items }) => [
    c,
    Object.fromEntries(items.map(n => [
      n[`id${c[0].toUpperCase()}${c.slice(1)}`],
      n.name,
    ])),
  ]));

  return this.phones.map(n =>
    Object.fromEntries(Object.entries(n).map(([ k, v ]) => [
      k,
      classes.hasOwnProperty(k) ? classes[k][v] : v,
    ]))
  );
},

2. Чтобы объединить - это надо на бэкенде вопрос решать. На клиенте... Ну, можно избавиться от копипасты:

created() {
  [
    [ '5ad979f4-7393-11ea-b9b1-d7fe1923484d', 'classinfo', 'classes' ],
    [ '46bf408d-739d-11ea-b9b1-5301e3b2b9ba', 'phones', 'phones' ],
  ].forEach(([ key, apiPropName, componentPropName ]) => {
    axios
      .get(`https://jsonblob.com/api/${key}`)
      .then(({ data: { [apiPropName]: d } }) => this[componentPropName] = d)
      .catch(e => this.errors.push(e));
  });
},

Comments

[massef]

Господи, когдаж это кончится...учишься-учишься, а все неправильно...
Спасибо большое, буду вникать в код.
Меня как раз и смущало ручное сравнение свойств.