Обработка сетевых ошибок с помощью Axios и Twilio - PullRequest
Новая
       16

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

6 голосов
/ 09 мая 2019

У меня есть приложение, которое использует 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, как я могу убедиться, что:

  • Если я испытываю сетевую ошибку, я получаю только одно сообщение об ошибке вместо 3, говорящее, что «произошла сетевая ошибка»
  • Мое приложение обнаруживает сетевую ошибку, затем пытается восстановить соединение, а затем, в случае успеха, возобновляет выборку данных, токены 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.log("this is a network error.");
  } else {
    console.log("received an error.");
  }
};

twilio.js: 

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

const registerEvents = () => {
  TwilioDevice.ready(() => {
    console.log('Twilio.Device is now ready for connections');
  });
  TwilioDevice.connect((conn) => {
    console.log(`Connecting call with id ${conn.parameters.CallSid}`);
    // code to start call
    conn.disconnect((connection) => {
      console.log(`Disconnecting call with id ${connection.parameters.CallSid}`);
      // code to end call
    });
  });
  TwilioDevice.error((error) => {
    console.log("Twilio Error:");
    console.log(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);
  }
};

1 Ответ

3 голосов
/ 16 мая 2019

Я бы порекомендовал использовать ваши методы 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() эта функция могла обработать ошибку, например, повторную попытку и т. Д.

...