使用axios和Twilio处理网络错误

Question

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

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

连接断开时，将发生以下情况：

1. getData 失败，导致控制台消息 this is a network error.

2. TwilioDevice.offline被执行。这将导致两条错误消息：尝试this is a network error.时会显示一条消息（错误消息2），失败后则会显示一条消息（错误消息3）。TwilioDevice.offlinefetchToken()received an error.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);
  }
};

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