2016-08-28 7 views
1

fetch約束を呼び出す別の関数から値を取得しようとしていますが、未定義を返しました。問題は結果が関数を呼び出すまでプロセスを待たない完了しました。ここでReactネイティブはデータを取得した後に約束から値を取得する

コードです:

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; 

誰かが機能処理が行われた後、値を返さ取得する方法を説明できますか?

おかげ

あなたがコンポーネント内の道のこの種で約束処理する必要があります

答えて

2

:あなたは(あなたのコード内でタイムアウト機能)約束を返す必要がAPI側で

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

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

タイムアウトは約束を拒否または解決するか、フェッチコールがここにある場合はより簡単です:

function timeout(ms, promise) { 
    return new Promise(function(resolve, reject) { 
    setTimeout(function() { 
     reject(new Error("Connection timeout")) 
    }, ms); 
    fetch(URL, { 
     method: 'POST', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'multipart/form-data' 
     }, 
     body: formData 
    })).then(
     (response) => response.json() 
).then((res) => { 
     // result data 
     resolve(res); 
    }).catch((error) => { 
     reject(error); 
    }).done(); 
    }); 
} 
+0

ありがとう、それはAsyncStorageでも動作します –

関連する問題