Нужно подредактировать код, чтобы при ошибке 404 срабатывал код в методе catch()

Question

Дело в том, fetch, если столкнется с какой-то ошибкой в http запросе, это может быть 404, 500, 502 и тд, то он нам не выдаст catch. Это не будет для него ошибкой. Ошибкой для него является отсутствие интернета, либо какие-то критические неполадки и самом запросе. Здесь мы с вами знакомимся с двумя свойствами, которые есть у promise, который возвращается из fetch. Это свойства .ok и status. Также знаю, что нужно использовать оператор throw. Как мне переделать код, что бы срабатывал блок кода в методе catch() при ошибке 404?

      // Forms

  const forms = document.querySelectorAll('form');

  const message = {
    loading: 'img/form/spinner.svg',
    success: 'Спасибо! Скоро мы с вами свяжемся',
    failure: 'Что-то пошло не так...'
  };

  forms.forEach(item => {
    bindPostData(item);
  });

  const postData = async (url, data) => {
    const res = await fetch(url, {
      method: "POST",
        headers: {
          'Content-type': 'application/json'
        },
        body: data
    });
    return await res.json();
  };

  function bindPostData(form) {
    form.addEventListener('submit', (e) => {
      e.preventDefault();

      const statusMessage = document.createElement('img');

      statusMessage.src = message.loading;

      statusMessage.style.cssText = `
        display: block;
        margin: 0 auto;
      `;

      form.insertAdjacentElement('afterend', statusMessage);



      const formData = new FormData(form);

      const json = JSON.stringify(Object.fromEntries(formData.entries()));

      postData('http://localhost:3000/requests', json)
      .then(data => {
          console.log(data);
          showThanksModal(message.success);
          statusMessage.remove(); //удаляем спиннэр
      })
      .catch(() => {
        showThanksModal(message.failure);
      }).finally(() => {
        form.reset();
      });


  function showThanksModal(message) {
    const prevModalDialog = document.querySelector('.modal__dialog');

    prevModalDialog.classList.add('hide');
    openModal();

    const thanksModal = document.createElement('div');
    thanksModal.classList.add('modal__dialog');
    thanksModal.innerHTML = `
      <div class="modal__content">
        <div class="modal__close" data-close>×</div>
        <div class="modal__title">${message}</div>
      </div>
    `;

    document.querySelector('.modal').append(thanksModal);
    setTimeout(() => {
      thanksModal.remove(); //10:50
      prevModalDialog.classList.add('show');
      prevModalDialog.classList.remove('hide');
      closeModal();
    }, 4000);
  }

Answer 1

Предложу 3 варианта

1. postData('http://localhost:3000/requests', json)
              .then((response) => {          
                  if (response.status === 404) {
                     throw Error('Error ...'); 
                  }
              })
              .catch((error) => {
                alert(error);
              });

2. postData('http://localhost:3000/requests', json)
      .then((response) => {          
          if (response.status === 404) {
             return new Promise((resolve, reject) => {
                    throw new Error("Error ...");
                   }); 
          }
      })
      .catch((error) => {
        alert(error);
      });

3. postData('http://localhost:3000/requests', json)
      .then((response) => {          
          if (response.status === 404) {
             return new Promise((resolve, reject) => {
                    reject(new Error("Error ..."));
                   }); 
          }
      })
      .catch((error) => {
        alert(error);
      });

подробнее прочитать про Response.status

и про Promise обработка ошибок

БЛОГ НА HUSL

Нужно подредактировать код, чтобы при ошибке 404 срабатывал код в методе catch()

Ответы (1 шт):