Javascript 使用 fetch 调用函数从另一个页面返回结果值，React native
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44644138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Return the result value with fetch call function from another page, React native
提问by Dinith Minura
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 ?
我需要从执行 fetch 调用的 react native 中的另一个页面返回函数的结果。我使用的方法如下。据我所知，这是因为异步调用。有没有一种特殊的方法可以在 react native 中实现这一点？
fetchcall.js
获取调用.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
仪表板.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?
它将结果显示为“未定义”，但该 fetch 调用有效并显示结果。有什么建议吗？
回答by Dani Akash
In fetchcall.jsyou are returning a Promise. Also since you are returning the responseDatain the .then()method itself, you don't need the .done()method.
在fetchcall.js 中，您将返回一个 Promise。此外，由于您responseData在.then()方法本身中返回，因此您不需要该.done()方法。
Since getvals()is returning a Promise, you need to access it's value in a .then()method.
由于getvals()正在返回一个 Promise，您需要在.then()方法中访问它的值。
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));回答by Chris
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.
我仍然是初级开发人员，但经常使用这种模式。如果有人有理由采用不同的方法，我很乐意听到。
