React Native - fetch 在 iOS 模擬器上不起作用（沒有檢查其他）

Question

這看起來像是 SO for React 上最常見的問題。 我嘗試了各種問題/答案中給出的所有內容。 它要么過時，要么無法正常工作。

1. 我創建了一個新的 react native 項目（所有內容都是最新/最新的）。
2. 我簡單地創建了一個具有 REST 調用的簡單組件
3. 此 REST 調用將永遠不會完成，go 將執行 promise 的下一步。

這是代碼

const Home = () => {

  useEffect(() => {
    console.log('start');
    fetch('https://jsonplaceholder.typicode.com/todos/1', {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      }
     }).then((response) => response.json()).then((data) => {
       console.log('result: ', data);
     }).catch((err) => {
       console.log('failed', err);
     }).finally(() => {
       console.log('Any hope?');
     });
  });

  return (<Text>Lets log the API's for now</Text>);
};

上面的代碼只記錄了在cli中start或者調試window，沒有別的，甚至最終寫入的日志都沒有。

我正在使用 xcode 12.0 (12A7209)，反應 16.13.1，@babel/core 7.12.10。

這不僅僅是 fetch，我已經嘗試過使用 http 的其他庫來像axios這樣的原生反應，沒有任何幫助。 他們都傾向於表現相同。

我已經通過在模擬器中打開一個網站來檢查瀏覽器，它有工作互聯網。 我嘗試替換在線免費提供的 API。

順便說一句，這是一個裸項目。 我用 expo 嘗試了類似的示例，它的行為恰好相同。

謝謝

Answer 1

以防其他人需要它。 我通過添加解決了它

<key>NSAllowsArbitraryLoads</key>
<true/>

到位於項目中 ios 文件夾內的 Info.plist 文件。

於是我改變了

<key>NSAppTransportSecurity</key>
    <dict>
      <key>NSExceptionDomains</key>
      <dict>
        <key>localhost</key>
        <dict>
          <key>NSExceptionAllowsInsecureHTTPLoads</key>
          <true/>
        </dict>
      </dict>
    </dict> 

和

<key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
      <key>NSExceptionDomains</key>
      <dict>
        <key>localhost</key>
        <dict>
          <key>NSExceptionAllowsInsecureHTTPLoads</key>
          <true/>
        </dict>
      </dict>
    </dict>

Answer 2

我遇到了這個問題，XMLHttpRequest 從不觸發它的回調，如 onload 或 onreadystatechange。 這導致 React-Native 的 Fetch 實現中斷（因為它實際上是 XMLHttpRequest 的包裝器）。 我從未解決過這個問題，但我通過使用不同的庫將 React-Native Global 的 Fetch 原型替換為 react-native-fetch-blob 來解決這個問題。 react-native-fetch-blob 是使用 NativeModules 和更健壯實現的 fetch 長期運行替代品中維護得最好的版本。

所以對於那些在那里搜索的人來說，可能會有各種各樣的問題。 某些版本的 Android 要求您聲明 clearText（未加密）是否可以通過 Internet 發送。 一些 iOS 版本已經在 SSL 證書問題上出現問題，即使是有效證書也是如此。 這是一個不常見的錯誤，但 RN 的 fetch 問題記錄可以追溯到 2015 年，與本文中的問題類似。 同樣，我的解決方案是完全替換 Fetch，並用 react-native-fetch-blob 替換它，它具有 Fetch API 的本機實現。 Metro 中有時還會出現一個問題，如果您關閉 inlineRequires fetch 有時會開始工作。 忘記這一切並替換 fetch。