React Fetch Throw Проблема

отреагируйте новичок здесь. Я использовал api response fetch и столкнулся с проблемой при попытке выдать настраиваемую ошибку. У меня есть конечная точка api отдыха, работающая на localhost: 8080. С тех пор я отключил процесс (имитируя неработающую службу). Я хочу выдать более описательную ошибку, а не стандартную ошибку «Failed to Fetch». Кажется, что код отклоняет мою ошибку выше и использует ошибку выборки по умолчанию. Есть ли способ отменить это?

fetchData() {
fetch('http://localhost:8080/locales/all')
  .then(function(response) {
    if (response.ok) {
      return response.json();
    }
    throw Error('Oops, looks like the service is down :-(');
  })
  .then(parsedJSON => {
    this.setState({
      locales: parsedJSON.content,
      isLoading:false
    });
  }).catch(error => {
    this.setState({
      error: error.message,
      isLoading:false
    });
    console.info(error.message); // results in Failed to fetch
});

Может это сам fetch выходит из строя, даже не доходя до then? Возможно, потому что у IIRC есть проблема с использованием localhost (вам нужно сделать некоторые разрешения).

— 18.07.2018 03:21

javascript reactjs fetch

18.07.2018 03:17

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

147

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что первоначальный вызов fetchмай разрешается с помощью объекта Response, но если fetch полностью выйдет из строя, он вообще не разрешится и перейдет непосредственно к catch. Это станет ясно, если вы поместите это в свой код:

fetch('http://localhost:8080/locales/all')
  .then(function(response) {
    console.info('got a response');

Если вы не видите got a response, вы не сможете передать throw пользовательское сообщение об ошибке внутри .then.

function fetchData() {
  fetch('http://localhost:8080/locales/all')
    .then(function(response) {
      console.info('got a response');
      if (response.ok) {
        return response.json();
      }
      throw new Error('Oops, looks like the service is down :-(');
    }).catch(error => {
      console.info(error.message);
    });
}
fetchData();

Вместо этого вы можете изменить сообщение об ошибке внутри самого catch:

}).catch(error => {
  if (error.message === 'Failed to fetch') {
    // change the message, or handle as needed:
    error.message = 'Oops, looks like the service is down :-(';
  }

function fetchData() {
  fetch('http://localhost:8080/locales/all')
    .then(function(response) {
      console.info('got a response');
      if (response.ok) {
        return response.json();
      }
      throw new Error('Oops, looks like the service is down :-(');
    }).catch(error => {
      if (error.message === 'Failed to fetch') {
        error.message = 'Oops, looks like the service is down :-(';
      }
      console.info(error.message);
    });
}
fetchData();

Именно так! Он никогда не получает ответа и сразу попадает в ловушку. Спасибо за очень ценную помощь.

— 18.07.2018 03:28

18.07.2018 03:24