最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

从Node Js调用数据进行反应

运维笔记admin8浏览0评论

从Node Js调用数据进行反应

从Node Js调用数据进行反应

我正试图在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}`));

这是Client / 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返回的信息提供给客户端,不需要渲染只是希望能够拥有它我可以弄清楚渲染

回答如下:
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端点可能不存在。

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论