1
Je fais deux demandes distinctes à différentes API pour recevoir le [Bitcoin/USD], puis [GBP/USD]. J'utilise axios pour configurer un promise, et sur les deux appels résolvant avec succès, je mets les deux valeurs à l'état set.State{}. Je suis en train de calculer le taux de change entre GBP/Bitcoin, mais pour la vie de moi ne peut pas m'en tenir à la meilleure façon de le faire. Cela fait aussi un petit moment que j'ai utilisé React, donc tous les conseils pour améliorer ce que j'ai sont géniaux.Deux appels API différents - calculer le taux de change
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;