Question

我需要使用API密钥向外部API发出API请求。我知道如何通过编写onSubmit函数在React中创建此API请求。但由于我有一个我想要保守秘密的API密钥，我将编写一个简单的Node应用程序来存放env变量。

除了在节点中搞乱之外，这是我第一次使用Node的生产经验，我想知道我的思维过程是否正确，如果没有，更好的方法是做到这一点。

这个问题的大部分都是伪代码，因为我还没有开始使用Node部分。

我们的想法是，在React组件中，它会调用Node应用程序，而后者又会调用外部API。

React -> Node -> External API

所以React组件会是这样的：

handleSubmit: function() {
  var data = this.refs.testData.getDomNode().value;

  $.ajax({
    url: '/my-node-endpoint',
    dataType: 'json',
    type: 'POST',
    data: { test: data },
    success: function(data) {
      // Whatever success call I want to make
    }.bind(this)
  })
}

然后在我的Node应用程序中，它会像这样：

app.post('/my-node-endpoint', function(req, res) {
    // Store the values we are posting as JSON
    // Start the post request
    // On End tell the React component everything is ok
    // Prosper
});

一如既往，感谢您提供的任何帮助。

Answer 1

你的思维过程对我来说是正确的。

如果您要调用的API来自其他域，则必须在您的节点服务器上构建一个包装器，就像您在此处所做的那样。除非外部API支持没有域限制的跨源请求（例如MapBox web services），否则您将不得不这样做。

对您的代码进行了一些改进：

据我所知，您可以使用React.findDOMNode(this.refs.testData).value代替this.refs.testData.getDomNode().value。 getDomNode（）在v0.13中已弃用。
对于所有AJAX调用，您可以在Flux中使用Store概念。商店保留数据的状态，包括通过AJAX请求更新数据。在您的React UI代码中，您只需要调用商店的方法，这样可以使您的UI代码保持干净。我通常在不使用Flux的情况下自己创建商店类。

React Node API请求设计模式

1 个答案: