Обработка сетевых ошибок с помощью axios и Twilio

У меня есть приложение, которое использует axios для запросов ajax. Когда у пользователя возникает проблема с сетью (например, его Wi-Fi отключается, и у него больше нет подключения к Интернету во время работы с моим приложением), я хочу убедиться, что выполняется только первый запрос axios, и если я обнаружу, что есть проблема с сетью, чтобы больше не пытаться выполнять запросы, а вместо этого повторять тот же запрос до тех пор, пока он не будет успешным.

Мое приложение выполняет много запросов, в том числе запрос каждые 2,5 секунды (в данном примере getData). Он также устанавливает соединение Twilio при инициализации приложения (оно выполняет twilio() при инициализации).

При потере связи происходит следующее:

  1. getData не работает, в результате чего на консоли появляется сообщение this is a network error.

  2. TwilioDevice.offline выполняется. Это приводит к появлению двух сообщений об ошибках: сначала сообщение this is a network error. (сообщение об ошибке № 2), когда TwilioDevice.offline пытается выполнить fetchToken(), а затем сообщение received an error. (сообщение об ошибке № 3) после сбоя fetchToken().

Учитывая # 1 и 2, как я могу убедиться, что:

  • Если у меня возникает сетевая ошибка, я получаю только одно сообщение об ошибке вместо трех, в котором говорится, что «произошла сетевая ошибка».
  • Мое приложение обнаруживает сетевую ошибку, затем пытается восстановить соединение, а затем, в случае успеха, возобновляет получение данных, токенов Twilio и т. д.

Спасибо! Код ниже.

пример кода:

const getData = async () => {
  try {
    const response = await axios.get('api/data');
    return response.data;
  } catch (error) {
    handleError(error);
  }
};

const fetchToken = async () => {
  try {
    const data = await axios.get('api/twilio-token');
    return data.token;
  } catch (error) {
    return handleError(error);
  }
};

const handleError = error => {
  if (!error.response) {
    console.info("this is a network error.");
  } else {
    console.info("received an error.");
  }
};

твилио.js:

import { Device as TwilioDevice } from 'twilio-client';

const registerEvents = () => {
  TwilioDevice.ready(() => {
    console.info('Twilio.Device is now ready for connections');
  });
  TwilioDevice.connect((conn) => {
    console.info(`Connecting call with id ${conn.parameters.CallSid}`);
    // code to start call
    conn.disconnect((connection) => {
      console.info(`Disconnecting call with id ${connection.parameters.CallSid}`);
      // code to end call
    });
  });
  TwilioDevice.error((error) => {
    console.info("Twilio Error:");
    console.info(error);
  });
  TwilioDevice.offline(async () => {
    try {
      const newTwilioToken = await fetchToken(); // error message #2
      return TwilioDevice.setup(newTwilioToken);
    } catch (error) {
      return handleError(error); // error message #3
    }
  });
};

export const twilio = async () => {
  try {
    registerEvents();
    const twilioToken = await fetchToken();
    TwilioDevice.setup(twilioToken);
  } catch (error) {
    return handleError(error);
  }
};

Я вижу много журналов, но ничего с этим не делаю. Почему?

tiborK 16.05.2019 21:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
6
1
513
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Я бы рекомендовал сделать так, чтобы ваши методы fetchToken и getData выдавали ошибки, а не обрабатывали их сами, чтобы они могли обрабатываться их внешними функциями.

Что-то типа,

const getData = async () => {
  try {
    const response = await axios.get('api/data');
    return response.data;
  } catch (error) {
    throw (error);
  }
};

const fetchToken = async () => {
  try {
    const data = await axios.get('api/twilio-token');
    return data.token;
  } catch (error) {
    throw (error);
  }
};

Так что, когда вы вызываете twilio(), эта функция может обрабатывать ошибки, такие как повторная попытка и т. д.

Другие вопросы по теме