Question

如何获得承诺，以便我可以在我的网站上使用比特币价格？

axios.get('https://api.coinmarketcap.com/v1/ticker/?convert=EUR&limit=10')
  .then(function(response){
    console.log(response.data[0].price_usd); 
  });

这是一个带有代码示例的codepen。

https://codepen.io/albin996/pen/LzLZYX?editors=1112

Answer 1

我们应该首先注意外部请求应该在React中小心处理，这样实际的反应性才能很好地保持其性能。这就是为什么我们要创建一个类来有条理地保存这个逻辑的原因。

const URL = 'https://api.coinmarketcap.com/v1/ticker/convert=EUR&limit=10';

// Our component now is a full class
class BitcoinDisplay extends React.Component {

  constructor(props) {
    super(props);

    // Start with no response available
    this.state = {response: false}; 
  }

  // Waits the component to be rendered before calling API
  componentDidMount() {
    axios.get(URL).then(response => {
        // Updates the state with the response
        this.setState({ response })
    });
  }

  // Renders the component with the available data
  render() {
    if(!this.state.response) {
      // Show a loading state because data may not be available yet
      return 'Loading data...'; 
    } else {
      return (<h1>{response.data[0].price_usd}</h1>);
    }
  }
}

然后，在DOM中渲染它。

ReactDOM.render(BitcoinDisplay, document.getElementById('app'));

如何访问axios响应承诺并在我的网页上使用它？

1 个答案: