CODEWITHSUNDEEP
react-nativefetchexpo
Ska
Ska

Reputation: 6888

Fetch someUrl.html not working in React Native / Expo?

I'm trying to use fetch to get the contents of the HTML page in React Native, and I'm running it on expo, here:

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

Basically the code is nothing special, uses 'fetch' which does work for loading .json files, but I can't get it to work for .html files. It just silently fails, and I don't even get an error logged. I'm not sure if this is Expo or ReactNative issue.

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>
    );
  }
}

At 1 I get the response logged:

{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:{…}}

At 2 I get absolutely nothing logged.

Upvotes: 4

Views: 1845

Answers (2)

Jimi Pajala
Jimi Pajala

Reputation: 2368

It's because you are parsing your Response as text and not as json, and then trying to call object-key against string. Basically what you have at that point is string which looks like json. Parse your response with .json()-method instead.

return response.text() should be therefore return response.json()

to reconstruct your code

// 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

I would succest using await/async since syntax is much more cleaner and it start's to be way to go.

Upvotes: 0

roel
roel

Reputation: 1660

Promise syntax is confusing to me, so I changed into 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)
   }
}

It works! You can check it here: https://snack.expo.io/@aazwar/fetch-url

Upvotes: 5

Related Questions