Question

我正在尝试使用fetch在React Native中获取HTML页面的内容，并且我正在博览会上运行它，这里：

https://snack.expo.io/@abalja/hellofetch

基本上，代码没有什么特别的，它使用“ fetch”来加载.json文件，但我无法将其用于.html文件。它只是默默地失败，而且我什至都没有记录错误。我不确定这是Expo还是ReactNative问题。

const url2 = 'http://www.spiegel.de/sport/fussball/nations-league-italien-trifft-in-der-nachspielzeit-polen-steigt-ab-a-1233219.html#ref=rss'

export default class App extends React.Component {
  componentDidMount(){

    console.log('did mount, fetching: ' + url2)
    fetch(url2)
        .then((response) => {
          console.log(response) // 1
          return response.text()
        })
        .then((responseText) => {
          console.log('fetch text', responseText) // 2
          // return responseText.movies;
        })
        .catch((error) => {
          console.error(error);
        });
  }
  render() {
    return (
      <View style={styles.container}>

      </View>
    );
  }
}

在1时，我记录了响应：

{type:"default",status:200,ok:true,headers:{…},url:"http://www.spiegel.de/sport/fussball/nations-league-italien-trifft-in-der-nachspielzeit-polen-steigt-ab-a-1233219.html",_bodyInit:{…},_bodyBlob:{…}}
type:"default"
status:200
ok:true
►headers:{map:{…}}
url:"http://www.spiegel.de/sport/fussball/nations-league-italien-trifft-in-der-nachspielzeit-polen-steigt-ab-a-1233219.html"
►_bodyInit:{_data:{…}}
►_bodyBlob:{_data:{…}}

2点时我什么都没记录。

Answer 1

Promise语法让我感到困惑，所以我改为async-await：

async componentDidMount() {
    console.log('did mount, fetching: ' + url2);
    try {
        let response = await fetch(url2);
        let text = await response.text();
        console.log(text)
   } catch(e) {
        console.log(e)
   }
}

有效！您可以在此处检查它：https://snack.expo.io/@aazwar/fetch-url

Answer 2

这是因为您将Response解析为text而不是json，然后尝试针对string调用对象键。基本上，此时您拥有的是看起来像json的字符串。改为使用.json()方法解析您的响应。

return response.text()应该是return response.json()

重建代码

// With .then()
fetch(url2)
    .then((response) => {
      return response.json()
    })
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });

// OR with await/async
const response = await fetch(url2)
const json = await response.json() // As '.json()' is async function as well
return json.movies

我会使用await / async来成功，因为语法更加简洁，并且这将成为开始之路。

获取someUrl.html在React Native / Expo中不起作用？

2 个答案: