React / Axios：使用 CoinMarketCap 的密钥获取 API 数据

Question

在这里没有编程经验...我一直在阅读一些关于此的问题，但无法正确解决。 我将 React 用于一个小型应用程序，并希望从 API 获取数据，在本例中为 Coinmarketcap，但它需要一个密钥，并且不知道如何通过 axios 传递它。 使用 Postman 发出测试请求，它工作正常。

这是 API 接收请求的方式（Node.js 示例）：

const rp = require('request-promise');
const requestOptions = {
  method: 'GET',
  uri: 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest',
  qs: {
    'start': '1',
    'limit': '5000',
    'convert': 'USD'
  },
  headers: {
    'X-CMC_PRO_API_KEY': 'b54bcf4d-1bca-4e8e-9a24-22ff2c3d462c'
  },
  json: true,
  gzip: true
};

rp(requestOptions).then(response => {
  console.log('API call response:', response);
}).catch((err) => {
  console.log('API call error:', err.message);
});

这是我的 React 文件的代码：

import React, { Component } from 'react'
import axios from 'axios'

class Prices extends Component {

    state = {
        cryptos: []
    }

    componenDidMount() {

        axios.get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest', {
            headers: { 'X-CMC_PRO_API_KEY': 'aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee' }
        })
        .then(res => {
            console.log(res)
            this.setState({
                cryptos: res.data.slice(0,50)
            })
        });
    }
    render() {
        return(
            <div>asdf</div>
        )
    }
}

export default Prices

显然，我把钥匙藏在那里了。

1. 应用程序运行正常
2. 没有明显的错误，但也...
3. 没有登录控制台

问题不在于我做错了什么，而在于……

在此先感谢您对我的帮助。

编辑： 父文件代码

import Layout from '../components/Layout'
import Prices from '../components/prices'
import axios from 'axios'

const Index = (props) => (
    <Layout>
        <div className="container">
            <h1>Welcome to CoinInfo</h1>
            <p>Check current Bitcoin rates</p>
            <Prices />
        </div>
    </Layout>
)

export default Index

Answer 1

您的请求中缺少query string 参数，并且还有一个错字。它是componentDidMount，组件中缺少t。

请尝试以下代码。

import React, { Component } from 'react'
import axios from 'axios'
class Prices extends Component {
    state = {
        cryptos: []
    }

    componentDidMount() {
       this.fetchData();
    }

    async fetchData() {
        let qs = `?start=1&limit=5000&convert=USD`
        try {
            let res = await axios.get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest' + qs, {
                headers: { 'X-CMC_PRO_API_KEY': 'aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee' }
            });
            console.log(res)
            this.setState({
                cryptos: res.data.slice(0, 50)
            });
        } catch (error) {
            console.log(error);
        }

    }
    render() {
        return (
            <div>asdf</div>
        )
    }
}
export default Prices

Answer 2

根据 CoinMarketCap 的文档

目前通过 CORS 配置禁止使用 Javascript 在客户端发出 HTTP 请求。这是为了保护您的应用程序用户不应该看到的 API 密钥，这样您的 API 密钥就不会被盗。通过您自己的后端服务路由调用来保护您的 API 密钥。

这意味着，他们不希望您从浏览器或客户端进行直接 API 调用。相反，他们会告诉您调用后端服务，该服务将您的用户 ID 与密钥进行映射，并对 coinMarketCap 网站进行中间调用

例如，您可以在从客户端调用的节点服务器中公开一个 API，在该 API 调用中，节点服务器将调用 coinMarketBase API 并返回结果