将应用程序置于后台时获取错误答案

【问题标题】：Error fetch when App is put in background将应用程序置于后台时获取错误
【发布时间】：2019-08-16 15:42:02
【问题描述】：

我的 RN 应用程序遇到了问题，想知道是否有人遇到过这个问题以及他们是如何解决的。在 fetch 调用期间，如果用户将应用程序置于后台并返回，则 fetch 总是会出错（catch 块）。如果您对此问题还有任何疑问，请告诉我。

【问题讨论】：

它是否在您的 catch 块中给出特定错误？您可以提供的有关您正在做的事情、正在发生的事情以及您期望发生的事情的任何其他信息都将有助于排除正在发生的事情，或者为您找到可靠的解决方案。
@DougWatkins 捕获块错误返回“网络请求失败”。我希望它完成 fetch 调用和所有剩余的逻辑。这有帮助吗？
根据后台应用程序在移动设备上的运行方式，无法保证这一点。您将不得不处理应用程序在进入后台时暂停的情况。对于android，如果您需要执行不依赖于前台应用程序的后台网络请求，您可以考虑使用无头js：facebook.github.io/react-native/docs/headless-js-android
我的想法是你可以做两件事之一。 1 - 研究一个本地解决方案，即使在后台也能保持您的网络开放，这可能是简单的或复杂的，因为我还没有这样做，所以我对从哪里开始没有任何建议。 2 - 如果您在 catch 块中收到该错误，请再次尝试调用并在第二次调用失败时传播错误。

【解决方案1】：

最近陷入了这个问题。有时，当应用程序在后台时，iOS 上的网络请求会失败。 https://developer.apple.com/forums/thread/106838

你可以试试下面的钩子，它会在发送请求之前等待你的应用进入前台。

import { useEffect, useRef } from "react";
import { AppState, AppStateStatus } from "react-native";

export const useFetchOnAppForeground = () => {
  const listener = useRef(null);

  function fetchOnAppForeground(params) {
    if (AppState.currentState === "active") {
      return fetch(params);
    } else {
      return new Promise((resolve, reject) => {
        function fetchData(state: AppStateStatus) {
          if (state === "active") {
            console.log("calling foreground fetch");
            fetch(params).then(resolve).catch(reject);
            AppState.removeEventListener("change", fetchData);
            listener.current = null;
          }
        }

        AppState.addEventListener("change", fetchData);
        listener.current = fetchData;
      });
    }
  }

  useEffect(() => {
    return () => {
      if (listener.current) {
        AppState.removeEventListener("change", listener.current);
      }
    };
  }, []);

  return fetchOnAppForeground;
};

// Usage
const fetch = useFetchOnAppForeground();

要点 - https://gist.github.com/intergalacticspacehighway/e1ec053064871f98f50646f80f99c888

【讨论】：