从 Javascript 中的 url 获取 JSON 文件，React Native

Posted 2023-03-04

【中文标题】从 Javascript 中的 url 获取 JSON 文件，React Native

【英文标题】：Fetch JSON file from url in Javascript, React Native

【发布时间】：2020-07-10 20:12:17

【问题描述】：

我从 url 获取 JSON 数据时遇到问题。如果您能帮我解决这个问题，我将不胜感激。

我想从 firebase 存储中获取 JSON 数据，但有些我做不到，所以我简化了代码，现在它真的很简单，但没有运气。 我也在这个社区搜索了错误原因，但没有找到。

这是我的代码。

import React,  Component  from 'react';
import  View, Text, StyleSheet, TouchableOpacity  from 'react-native';

export default class App extends Component 
  render() 
    return (
      <View>
        <TouchableOpacity onPress=this.handleOnPress>
          <Text>test</Text>
        </TouchableOpacity>
      </View>
    );
  
  handleOnPress = () => 
    console.log('test was clicked');
    fetch('https://facebook.github.io/react-native/movies.json')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
  ;

不用说，'test was clicked' 消息显示没有任何问题

错误信息

Error: "Failed to fetch" in TypeError: Failed to fetch ...

我使用 Expo Snack，网络编译器。

谢谢。

【问题讨论】：

已经解决：***.com/questions/42754388/…

我将您的代码放入 Expo Snack 中，它可以工作，您可以分享您正在使用的整个 Snack 吗？这是我的 - snack.expo.io/@hannigan/trembling-almond

@Corentin de Maupeou 非常感谢。我以前试过一次，但以后我会再试一次！

@Dan 嗯...这可能是因为我的网络环境...你的零食在我的笔记本电脑上也不起作用。我仍然不知道发生了什么......

【参考方案1】：

是Failed to fetch之前的错误： Access to fetch at 'https://facebook.github.io/react-native/movies.json' from origin 'XXX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

如果是这样，这是一个CORS 问题。

如果没有，请随时发布您看到的任何其他信息。我确信记录的错误一定多于 - 获取失败。

【讨论】：

感谢您这么快回复！但是，恐怕没有其他信息或错误代码。控制台看起来像单击了测试错误：TypeError 中的“无法获取”：无法获取...

您的 Fetch Code 中没有任何问题。它可能是别的东西。能发个链接什么的吗？

感谢您的回复！ snack.expo.io/@vocabon/e46690

【参考方案2】：

这里有 2 种方法使用 javascript 从 json 文件 URL 中异步获取数据

使用 fetch + .then

       function loadUsers_then() 
        let url = '< Your URL Here>';
        try
        fetch(url)
            .then((response) =>  return response.json() )
            .then((data) => 
                for (let curr of data.results) 
                    str += `<Your html string here>`
                
                document.querySelector('#mydiv').innerHTML = str;
            )
    
       catch(err)
            console.log('there was an error', err);
        

使用异步 + 等待

async function loadusers_async_await() 
        let url = '< Your URL Here>';

    try 
        let response = await fetch(url);
        let data = await response.json();

        let str = '';
        for (let curr of data.results) 
            str += `<Your html string here> < $curr.key1.key2... >`
        
        document.querySelector('#mydiv').innerHTML = str;
    
    catch (err) 
        console.log('there was an error', err);