使用 axios 和 Twilio 处理网络错误答案

【问题标题】：Handling network errors with axios and Twilio使用 axios 和 Twilio 处理网络错误
【发布时间】：2019-05-09 19:40:10
【问题描述】：

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

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

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

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

鉴于 # 的 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);
  }
};

【问题讨论】：

我看到很多日志记录，但并没有真正用它做任何事情。为什么？

标签： javascript network-programming twilio axios twilio-api

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

【讨论】：