React-native async fetch returns null

Question

I am trying to put fetch functions into a separated file, so I can organise these API fetch easily. However, when I try to fetch and return the data, it gives me null or an unexpected json object. Here is part of my src:

//api.js
export async function LoginAPI(username, password) {
   const url = baseURL + "/login/";
   var params = {username: username, password: md5.hex_md5(password)};

   let response = await fetch(url, {
      method: 'POST',
      headers: {'Accept': 'application/json','Content-Type': 'application/x-www-form-urlencoded'},
      body: JSON.stringify(params)
   });
   return await fetch(url, {
      method: 'POST',
      headers: header,
      body: JSON.stringify(params)
   })
   .then((res) => res.text())
   .then((text) => text.length ? JSON.parse(text) : {})
    .catch((error) => {
        throw error;
    });
};

Here is the another file.

//index.js
var Login = React.createClass({
  onPress_login: function() {
  var value = this.refs.form.getValue();
  if (value) {
     result = LoginAPI(value.username, value.password);
     console.log(result);
  } else {
     this.AlertDialog.openDialog();
  }
},
render() {
   return (
 (...)
 <Button onPress={this.onPress_login}>
     <Text>Login</Text>
 </Button>

The fetch is working, it is communicating with the server. However, the console log returns me this at the first place

 Promise  _45: 0_54: null  _65: null  _81: 1  __proto__: Object

I am assuming that the result log in the console at the first place is not the await result (the actual response from server, but an object of fetch response). I tried to search out methods online but I can't find any post/blog/article saying how to do fetch as a function call.

Is there any way to do like swift, LoginAPI(username, password, callback: {...}) please?

Rúben Azevedo · Accepted Answer · 2017-02-16 23:17:24Z

5

The problem is that you're are making an async function and not waiting for the response, the you see that kind of console log.

Try this:

result = await LoginAPI(value.username, value.password);

Let me know if this was your problem.

answered Feb 16, 2017 at 23:17

Rúben Azevedo

2001 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DrKNa Over a year ago

oh nice hint! It works with this way.

onPress_login: async function() {       var value = this.refs.form.getValue();       if (value) {          result = await LoginAPI(value.username, value.password);

Collectives™ on Stack Overflow

React-native async fetch returns null

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related