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

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

应用运行正常
没有明显错误，但也...
没有登录控制台

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

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

编辑：父文件代码

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 的文档

Making HTTP requests on the client side with Javascript is currently prohibited through CORS configuration. This is to protect your API Key which should not be visible to users of your application so your API Key is not stolen. Secure your API Key by routing calls through your own backend service.

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

例如，您可以在您从客户端调用的节点服务器中公开一个 API，在那个 API 调用中，节点服务器将调用 coinMarketBase API 和 return你的结果

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

React / Axios: fetch API data with key for CoinMarketCap

api

key

reactjs

axios

coinmarketcap