2

在这里没有编程经验...我一直在阅读有关此的一些问题，但无法正确解决。我将 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
4

2 回答 2

3

您在请求中缺少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
于 2020-04-07T04:05:04.200 回答
2

根据 CoinMarketCap 的文档

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

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

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

于 2020-04-07T04:39:11.947 回答