Считаете, что someUrl.html не работает в React Native / Expo?

Question

Я пытаюсь использовать fetch, чтобы получить содержимое HTML-страницы в React Native, и я запускаю ее на выставке, здесь:

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

Это потому, что вы анализируете свой 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, так как синтаксис намного чище, и его нужно начинать.

Answer 2

Синтаксис 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