Question

我正在尝试在nodejs中调用API（仅允许服务器端调用）。我设法将信息返回到控制台，现在我试图将数据传递到我的应用程序的app.js文件中。

我目前正在与React应用一起使用node.js后端，并表示要在它们之间进行通信。

我有两个文件夹backend和client

这是backend/server.js：

const express = require("express");
const API_PORT = 3001;
const app = express();
const router = express.Router();

  router.get("/bitmex", () => !async function(){
      const api = new BitmexAPI({
        "apiKeyID": "",
        "apiKeySecret": ""
      });
       const chatMessage = await api.Position.get()
       return(chatMessage.json({ success: true, chatMessage}))
  }())

  app.listen(API_PORT, () => console.log(`LISTENING ON PORT ${API_PORT}`));

这是client/App.js

import React, { Component } from "react";


 class App extends Component {
 // initialize our state 
 state = {
    data: [],
 };



 // when component mounts, first thing it does is fetch all existing 
 data in our db
 // then we incorporate a polling logic so that we can easily see if our db has 
 // changed and implement those changes into our UI
 componentDidMount() {
 console.log("this worked successfully")
 this.getDataFromDb();
 }

 getDataFromDb = () => {
     fetch("http://localhost:3001/bitmex")
     .then(data => chatMessage.json())
     .then(res => this.setState({ data: res.data }));
 };




// here is our UI
// it is easy to understand their functions when you 
// see them render into our screen
render() {
const { data } = this.state;
return (
  <div>
    <ul>
      //render data here somehow
    </ul>
  </div>
);
}
}

export default App;

API的响应如下：

[
   {
    "account": 0,
    "symbol": "string",
    "currency": "string",
    "underlying": "string",
    "quoteCurrency": "string",
    "commission": 0,
    "initMarginReq": 0,
    "maintMarginReq": 0,
    "riskLimit": 0,
    "leverage": 0,
    "crossMargin": true,
    "deleveragePercentile": 0,
    "rebalancedPnl": 0,
    "prevRealisedPnl": 0,
    "prevUnrealisedPnl": 0,
    "prevClosePrice": 0,
    "openingTimestamp": "2019-02-13T18:37:44.780Z",
    "openingQty": 0,
    "openingCost": 0,
    "openingComm": 0,
    "openOrderBuyQty": 0,
    "openOrderBuyCost": 0,
    "openOrderBuyPremium": 0,
    "openOrderSellQty": 0,
    "openOrderSellCost": 0,
    "openOrderSellPremium": 0,
    "execBuyQty": 0,
    "execBuyCost": 0,
    "execSellQty": 0,
    "execSellCost": 0,
    "execQty": 0,
    "execCost": 0,
    "execComm": 0,
    "currentTimestamp": "2019-02-13T18:37:44.780Z",
    "currentQty": 0,
    "currentCost": 0,
    "currentComm": 0,
    "realisedCost": 0,
    "unrealisedCost": 0,
    "grossOpenCost": 0,
    "grossOpenPremium": 0,
    "grossExecCost": 0,
    "isOpen": true,
    "markPrice": 0,
    "markValue": 0,
    "riskValue": 0,
    "homeNotional": 0,
    "foreignNotional": 0,
    "posState": "string",
    "posCost": 0,
    "posCost2": 0,
    "posCross": 0,
    "posInit": 0,
    "posComm": 0,
    "posLoss": 0,
    "posMargin": 0,
    "posMaint": 0,
    "posAllowance": 0,
    "taxableMargin": 0,
    "initMargin": 0,
    "maintMargin": 0,
    "sessionMargin": 0,
    "targetExcessMargin": 0,
    "varMargin": 0,
    "realisedGrossPnl": 0,
    "realisedTax": 0,
    "realisedPnl": 0,
    "unrealisedGrossPnl": 0,
    "longBankrupt": 0,
    "shortBankrupt": 0,
    "taxBase": 0,
    "indicativeTaxRate": 0,
    "indicativeTax": 0,
    "unrealisedTax": 0,
    "unrealisedPnl": 0,
    "unrealisedPnlPcnt": 0,
    "unrealisedRoePcnt": 0,
    "simpleQty": 0,
    "simpleCost": 0,
    "simpleValue": 0,
    "simplePnl": 0,
    "simplePnlPcnt": 0,
    "avgCostPrice": 0,
    "avgEntryPrice": 0,
    "breakEvenPrice": 0,
    "marginCallPrice": 0,
    "liquidationPrice": 0,
    "bankruptPrice": 0,
    "timestamp": "2019-02-13T18:37:44.781Z",
    "lastPrice": 0,
    "lastValue": 0
  }
]

我希望获得由React应用中呈现的API返回的信息。

Answer 1

尝试更改后端脚本以包含正文解析器

// backend/server.js
import express from 'express';
import bodyParser from 'body-parser';
// Set up the express app
const app = express();
const API_PORT = 3001;
// Parse incoming requests data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));


app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
 next();
});

app.get("/bitmex", () => !async function(){
      const api = new BitmexAPI({
        "apiKeyID": "",
        "apiKeySecret": ""
      });
       const chatMessage = await api.Position.get()
       return(chatMessage.json({ success: true, chatMessage}))
  }())

  app.listen(API_PORT, () => console.log(`LISTENING ON PORT ${API_PORT}`));

返回的数据（res.data）是一个对象，并且您试图在标签内显示。请注意，您无法在任何html元素内显示对象。

例如，如果您的api响应是：

data = {
name: "maxi",
place: "London",
}

您可以渲染为

    <div>
          The name of the user is {this.state.data.name} and the city is {this.state.data.city}
   </div>

希望这会有所帮助：）

从node.js传递数据以使用Express做出反应

1 个答案: