使用axios和Twilio处理网络错误

Question

我有一个应用程序，使用 axios 发送 ajax 请求。当用户遇到网络问题（例如，在我的应用程序中，他们的 wifi 断开连接并且不再具有互联网连接时），我想确保仅发出第一个 axios 请求，并且如果检测到存在网络问题，则不要尝试发出任何其他请求，而是重试相同的请求直到成功。

我的应用程序执行许多请求，包括每 2.5 秒钟的请求（在此示例中为 `getData`）。它还在应用程序初始化时建立 Twilio 连接（它在初始化时执行 `twilio()`）。

当连接丢失时，会发生以下情况：

1. `getData` 失败，导致控制台消息为 `this is a network error.`。 2. 执行 `TwilioDevice.offline`。这将导致两条错误消息：首先是当 `TwilioDevice.offline` 尝试 `fetchToken()` 时的 `this is a network error.` 消息（错误消息 #2），然后是在 `fetchToken()` 失败后的 `received an error.` 消息（错误消息 #3）。

鉴于上述情况，我该如何确保：

- 如果遇到网络错误，我只收到一条错误消息，而不是 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);
  }
};

- Jimmy

---

我看到了很多日志记录，但似乎没有对其进行任何处理。为什么？ - tiborK

Answer 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()函数时，该函数可以处理错误，例如重试等。

- Nishant Nair