从Nodej.s调用数据以做出反应

时间:2019-02-14 15:06:50

标签: node.js reactjs express

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

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

我有两个文件夹backendclient

这是backend/server.js

const express = require('express')

const bodyParser = require('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 atMessage.json({ success: true, chatMessage})
}())

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

这是客户端/ Appjs

    // /client/App.js
    import React, { Component } from "react";


    class App extends Component {
      // initialize our state 
      state = {
        data: [],
        id: 0,
        message: null,
        intervalIsSet: false,
        idToDelete: null,
        idToUpdate: null,
        objectToUpdate: null
      };



      // 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("yes")
        console.log(this.getDataFromDb());
      }


      getDataFromDb = () => {
        fetch("http://localhost:3001/bitmex")
          .then(data => data.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>{Object.keys(this.state.data[0]).map((key) => { return <li>{key}</li> })}</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
  }
]

我希望将API返回的信息传递到客户端,不需要渲染就可以了,我可以弄清楚渲染

1 个答案:

答案 0 :(得分:0)

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

这可能应该是:

app.get("/bitmex", async (req, res) => {
  const api = new BitmexAPI({
    "apiKeyID": "-",
    "apiKeySecret": ""
  });
  const chatMessage = await atMessage.json({ success: true, chatMessage})

  res.setHeader('Content-Type', 'application/json')
  res.end(chatMessage)
})

我不确定这是否可以解决您的问题。但是客户端应用程序中的404表示您的API端点可能不存在。