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

【问题标题】：Fetch JSON file from url in Javascript, React Native从 Javascript 中的 url 获取 JSON 文件，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，网络编译器。

谢谢。

【问题讨论】：

已经解决：stackoverflow.com/questions/42754388/…
我将您的代码放入 Expo Snack 中，它可以工作，您可以分享您正在使用的整个 Snack 吗？这是我的 - snack.expo.io/@hannigan/trembling-almond
@Corentin de Maupeou 非常感谢。我以前试过一次，但以后我会再试一次！
@Dan 嗯...这可能是因为我的网络环境...你的零食在我的笔记本电脑上也不起作用。我仍然不知道发生了什么......

标签： javascript react-native fetch typeerror

【解决方案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);

    }
}

【讨论】：