使用 axios 和 Twilio 处理网络错误

Question

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

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

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

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

鉴于 # 的 1 和 2，我如何确保：

如果我遇到网络错误，我只会收到一条错误消息，而不是 3 条消息 "there was a network error"
我的应用程序检测到存在网络错误，然后尝试重新建立连接，如果成功，则恢复获取数据、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);
  }
};

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

使用 axios 和 Twilio 处理网络错误

Handling network errors with axios and Twilio

javascript

network-programming

twilio

axios

twilio-api