Как запретить отрисовку функций рендера html по результату запроса fetch по условию?

Question

[Andy Koshman]

Всем привет, у меня имеется рендер разметки в html по определенному условию такого приблизительного вида:
https://jsfiddle.net/uwqfrjy7/2/

//рендер разметки по условию
if (item < 0) {
  alert("not render")
} else {
  currentItem.push(info);
  render([info]);
  update();
}

Так же рядом я делаю запрос:

fetch(url, options)
  .then((response) => response.json())
  .then((result) => {
    if (result.result === 0) { //если 0 то разметку не рендерить
      alert("Not found");
    } else {
      alert("Found")
    }
  })

Как правильно реализовать функционал, если в fetch if (result.result === 0) {}
то запретить отрисовку данных функций и push:

currentItem.push(info);
  render([info]);
  update();

Я подумал, что можно это реализовать в таком виде:

if (item < 0) {
  alert("not render")
} else {
  fetch(url, options)
    .then((response) => response.json())
    .then((result) => {
      if (result.result === 0) {
        alert("Not found");
      } else {
        currentItem.push(info);
        render([info]);
        update();
      }
    })
}

Но мне кажется что это слишком большая вложенность и наверное так лучше не делать по умолчанию. Есть ли какие то хорошие варианты решения?

Answer 1

[Чипекве]

Если пугает вложенность, можно добавить ретёрнов. А фетч завернуть в асинк-авейт.

if (item < 0) return;

const response = await fetch(url, options);
const result = await response.json();

if (result.result === 0) return;

currentItem.push(info);
render([info]);
update();

Comments

[Andy Koshman]

Спасибо, попробую.

Answer 2

[Михаил Ливач]

Классический способ борьбы с вложенностью - вынос кода в функции:

const renderResult = (result) => {
    if (result.result === 0) {
        alert("Not found");
    } else {
        currentItem.push(info);
        render([info]);
        update();
    }
};
if (item < 0) {
    alert("not render")
} else {
    fetch(url, options)
        .then((response) => response.json())
        .then(renderResult)
}

Comments

[Andy Koshman]

Спасибо, тоже красивый вариант, даже не предполагал о таком)