在 Javascript、React Native 中从 url 获取 JSON 文件

Question

我在从 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));
  };
}

不用说，消息“点击了测试”显示没有任何问题

错误信息

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

我使用 Expo Snack，Web 编译器。

谢谢你。

Answer 1

获取失败之前的错误是： 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. 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问题。

如果没有，请随时发布您看到的任何其他信息。 我确信记录的错误必须多于 - Failed to Fetch。

Answer 2

这是使用 javascript 从 json 文件 URL 异步获取数据的 2 种方法

使用 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);

    }
}