使用 React 获取多个 GET 请求 API 并分配变量答案

【问题标题】：Fetching multiple GET requests API using React and assigning variables使用 React 获取多个 GET 请求 API 并分配变量
【发布时间】：2020-08-14 22:34:54
【问题描述】：

我一直在开发一个调用多个 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>
    );
}

}

【问题讨论】：

查看Promise.all...

标签： reactjs api fetch

【解决方案1】：

您的代码中有很多错别字...与我在 cmets 中建议的使用 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

【讨论】：