1
我向兩個不同的API請求接受[比特幣/美元]和[英鎊/美元]。我正在使用axios
來設置promise
,並且在兩個調用都成功解析時,我將這兩個值都設置爲set.State{}
。兩種不同的API調用 - 計算匯率
我試圖計算英鎊/比特幣之間的匯率,但對於我的生活無法包裹我的頭如何最好地做到這一點。自從我使用React
以來,也有一段時間了,所以任何關於改進我所得到的建議都會很棒。
app.js
import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
class App extends Component {
constructor(props) {
super(props);
this.state = {
conv: [],
GBP: [],
XBT: [],
};
}
componentDidMount() {
axios.all([this.getXbt(), this.getGbp()])
.then(axios.spread((xbtValue, gbpValue) => {
const XBT = xbtValue.data.bpi.USD.rate_float;
const GBP = gbpValue.data.rates.GBP;
const conv = this.calcConversion(GBP, XBT);
this.setState({conv, GBP, XBT});
}));
}
calcConversion(x, y) {
// Calculate conversion value here
return x/y;
}
getXbt() {
return axios.get('https://api.coindesk.com/v1/bpi/currentprice/XBT.json');
}
getGbp() {
return axios.get('https://openexchangerates.org/api/latest.json?app_id=#API_KEY#');
}
render() {
return (
<div className="App">
<div id="crypto-conversion">
<span className="left">{this.state.conv}</span>
</div>
<div id="crypto-container">
<span className="left">{this.state.GBP}</span>
<span className="right">{this.state.XBT}</span>
</div>
</div>
);
}
}
export default App;