使用React和赋值变量获取多个GET请求API
使用React和赋值变量获取多个GET请求API
提问于 2020-08-15 06:34:55
我一直在开发一个程序，它调用多个API，使结果在应用程序上可见，然后我还必须跟踪结果，以便为以后的功能进行比较。到目前为止，我已经尝试了许多方法，而且效果最好，但我当前代码的问题是，在应用程序上只有一个响应可见
class GetRequest extends React.Component {
constructor(props) {
super(props);
this.state = {
gemBTCask: null,
gemBTCbid: null,
gemETHask: null,
gemETHbid: null
};
}
async componentDidMount() {
fetch('https://api.gemini.com/v1/pubticker/ethusd')
.then(response => response.json())
.then(data => this.setState({ gemETHask: data.ask }))
//.then(data => this.setState({ gemETHbid: data.bid }));
fetch('https://api.gemini.com/v1/pubticker/ethusd')
.then(response => response.json())
.then(data => this.setState({ gemETHbid: data.bid }));
fetch('https://api.gemini.com/v1/pubticker/btcusd')
.then(response => response.json())
.then(data => this.setState({ gemBTCask: data.ask }));
fetch('https://api.gemini.com/v1/pubticker/btcusd')
.then(response => response.json())
.then(data => this.setState({ gemBTCask: data.ask }));
}
render() {
const { gemBTCask } = this.state;
const { gemBTCbid } = this.state;
const { gemETCask } = this.state;
const { gemETCbid } = this.state;
return (
<div className="card text-center m-3">
<div className="card-body">
gemini BTC bid: $: {gemBTCbid}
</div>
<div className="card-arm">
gemini BTC ask: $: {gemBTCask}
</div>
<div className="card-ear">
gemini ETC bid: $: {gemETCbid}
</div>
<div className="card-leg">
gemini ETC ask: $: {gemETCask}
</div>
</div>
);
}}
回答 1
Stack Overflow用户
发布于 2020-08-15 08:18:50
在您的代码中有相当多的打字错误...与我在评论中建议的使用Promise.all的解决方案相比...如果你有问题-问吧。
export default class GetRequest extends React.Component {
state = {
gemBTCask: null,
gemBTCbid: null,
gemETHask: null,
gemETHbid: null
};
componentDidMount() {
Promise.all([
fetch('https://api.gemini.com/v1/pubticker/ethusd'),
fetch('https://api.gemini.com/v1/pubticker/btcusd')
])
.then(([ethResponse, btcResponse]) =>
Promise.all([ethResponse.json(), btcResponse.json()])
)
.then(([ethData, btcData]) =>
this.setState({
gemETHask: ethData.ask,
gemETHbid: ethData.bid,
gemBTCask: btcData.ask,
gemBTCbid: btcData.bid
})
)
.catch(error => {
console.error({ error });
});
}
render() {
const { gemBTCask, gemBTCbid, gemETHask, gemETHbid } = this.state;
return (
<div className="card text-center m-3">
<div className="card-body">gemini BTC bid: $: {gemBTCbid}</div>
<div className="card-arm">gemini BTC ask: $: {gemBTCask}</div>
<div className="card-ear">gemini ETC bid: $: {gemETHbid}</div>
<div className="card-leg">gemini ETC ask: $: {gemETHask}</div>
</div>
);
}
}现场演示：https://stackblitz.com/edit/react-gwkh8s?file=src%2FApp.js
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63420784
复制相关文章
相似问题
腾讯云开发者
