获取数据完成后,React Native从promises获取值

时间:2016-08-28 05:05:10

标签: javascript android reactjs react-native

我试图从另一个调用fetch promises的函数中获取值,但它返回undefined,我认为问题是结果不会从被调用函数等待进程直到完成。

以下是代码:

var myConnection = require('../components/connection');
var RequestToken = React.createClass({
getInitialState: function() {
    return {
    };
},
componentDidMount: function(){
    AsyncStorage.getItem('token').then((value) => {
        if(typeof value != null){
            this.setState({"token": value});
            // call this function
            this.catchToken(value);
        }
    }).done();
},
catchToken: async function(token){

    try{
        var URL = "http://someurl.com/";
        var params = {
            token:token
        }
        let val = await myConnection.now(URL,params);

            this.setState({
               responseAPI:val
            });
            // returned undefined
            console.error(this.state.responseAPI);
    }catch (e){
        console.error(e);
    }
}
});

和connection.js

function timeout(ms, promise) {
return new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject(new Error("Connection timeout"))
    }, ms);
    promise.then(resolve, reject);
});
}
var myConnection = {
now: async function(URL,params){
    //return "OK";
    var formData = new FormData();
    for (var k in params) {
        formData.append(k, params[k]);
    }
    timeout(10000, fetch( URL, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data'
        },
        body: formData
    })).then(
        (response) => response.json()
    ).then((res) => {
        // result data
        return res;
    }).catch((error) => {
        console.error(error);
    }).done();
}
};
module.exports = myConnection;

有人可以解释在功能处理完成后如何获得返回值吗?

由于

1 个答案:

答案 0 :(得分:3)

您应该在组件中以这种方式处理承诺:

_whileDisarmState

在api端你需要返回一个promise(代码中的超时函数):

myConnection.now(URL,params)
 .then(val => {
   this.setState({
      responseAPI:val
   });
 })
 .catch(error =>{
   console.error(error);
 });

超时应该拒绝或解决承诺,如果fetch调用在这里,则更简单:

var myConnection = {
  now: async function(URL,params){
  //return "OK";
  var formData = new FormData();
  for (var k in params) {
      formData.append(k, params[k]);
  }

//You need to return the promise
  return timeout(10000, fetch( URL, {
      method: 'POST',
      headers: {
          'Accept': 'application/json',
          'Content-Type': 'multipart/form-data'
      },
      body: formData
    })).then(
      (response) => response.json()
    ).then((res) => {
      // result data
      return res;
    }).catch((error) => {
      console.error(error);
    }).done();
  }
};