Return the result value with fetch call function from another page, React native
Solution 1
In fetchcall.js you are returning a Promise. Also since you are returning the responseData
in the .then()
method itself, you don't need the .done()
method.
Since getvals()
is returning a Promise, you need to access it's value in a .then()
method.
Overall, your code should be like this:
function getvals(){
return fetch('https://jsonplaceholder.typicode.com/posts',
{
method: "GET",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
return responseData;
})
.catch(error => console.warn(error));
}
getvals().then(response => console.log(response));
Solution 2
The best architectural pattern, I think, is to use a callback function, usually by writing in as an anonymous function.
///Component.js
my_service.login((data=>{
this.setState({body: data.body});
}));
////Service.js
export const login = function (cb){
fetch('http://myapi.com/103?_format=hal_json')
.then((response) =>{
return response.json();
})
.then((data) =>{
cb(data);
});
}
I am still a junior developer, but use this pattern frequently. If someone has a reason for a different approach, I would love to hear it.
Solution 3
fetch always return a Promise doesn't matter what you are returning. so you can return a string, variable or something else but you have to use .then to access data
file where you make fetch request
export const graphql = () => {
return fetch("https://graphqlzero.almansi.me/api", {
"method": "POST",
"headers": { "content-type": "application/json" },
"body": JSON.stringify({
query: `{
user(id: 1) {
id
name
}
}`
})
})
.then((res) => res.json()).then((responseData) => {
console.log(responseData);
return responseData;
})
}
file where you call function
graphql()
.then((e) => {
console.log("data", e)
});
Dinith Minura
I have been working as a Software Engineer for four years and now working as a Research Associate at NTU, Singapore focusing Machine Learning and Data Science for more than one year. I'm currently working in a research project related to financial data analysing and anomaly detection. I was successful in my software engineering career with a focus on mobile development and backend developments. I have been responsible for system designing, development and follow other best practices as a key member of the product development team. I'm deeply passionate about applying computer science solutions for real-world problems. In my spare time, I enjoy reading, travelling and astronomy.
Updated on March 31, 2021Comments
-
Dinith Minura about 3 years
I need to return the result of a function from another page in react native which performing a fetch call. I use the method as follows. As I know this is because asynchronous call. Is there a special way to achieve this in react native ?
fetchcall.js
import address from '../actions/address' const dashboard = { getvals(){ return fetch(address.dashboardStats(), {method: "POST", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify( {... }), }) .then((response) => response.json()) .then((responseData) => { console.warn(responseData); return responseData; }) .catch((error) => { console.warn(error); }) .done(); // return 'test_val''; } } export default dashboard;
dashboard.js
import dashboard from '../../services/dashboard'; class Dashboard extends Component { componentDidMount(){ console.warn(dashboard.getvals()); } } export default connect(mapStateToProps, bindAction)(Dashboard);
Its display the result as "undefined", but that fetch call works and it displays the result. Any suggestion?