Question

我向不同的API发出两个单独的请求以接收[比特币/美元]然后[英镑/美元]。我使用axios设置了promise，并且在两次调用成功解析后，我都将这两个值设置为状态set.State{}。

我试图计算英镑/比特币之间的汇率，但对于我的生活，我可以不知道如何最好地做到这一点。自从我使用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;

Answer 1

假设API将数据返回为GBP/1USD和USD/1XBT，那么转化率只是这两个值的乘积，并且会产生GBP/1XBT。

自从我使用了React以来，它已经有一段时间了，所以任何关于改善我所获得的建议都会很棒。

到目前为止，您的代码看起来很好。我喜欢你处理API调用的方式，setState()调用遵循约定，只调用一次。

编辑：

此外，我刚刚意识到，如果您愿意支付95美元/月的费用，Open Exchange Rates API会提供支持BTC的{{3}}端点。

两种不同的API调用 - 计算汇率

1 个答案: