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

Question

我正在向不同的 API 发出两个单独的请求以接收 [Bitcoin/USD] 和 [GBP/USD]。我正在使用 axios 设置 promise，并且在成功解析的两个调用中，我将两个值都设置为状态 set.State{}。

我正在尝试计算 GBP/Bitcoin 之间的汇率，但我实在想不出如何才能做到最好。自从我使用 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.

It's also been a little while since I've used React, so any advice on improving what I've got would be great.

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

编辑：

此外，我刚刚意识到，如果您愿意 shell 每月支付 95 美元，开放汇率 API 提供了一个 /convert 端点，支持 BTC.

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

Two different API calls - calculate exchange rate

javascript

xmlhttprequest

reactjs

axios