React节点API请求devise模式

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

除了在节点中搞乱，这是我的第一次使用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来自不同的域，则必须像在此处那样在节点服务器上构build一个包装器。 除非外部API支持没有域限制的交叉源请求（例如MapBox Web服务 ），否则您将不得不这样做。

你的代码的几个改进：

1. 据我所知，你可以使用React.findDOMNode(this.refs.testData).value而不是this.refs.testData.getDomNode().value 。 getDomNode（）在v0.13中已被弃用。
2. 对于所有的AJAX调用，您可以在Flux中使用Store概念。 商店保持数据的状态，包括通过AJAX请求更新数据。 在你的React UI代码中，你只需要调用商店的方法，这使得你的UI代码干净。 我通常自己创build一个商店class，而不使用Flux。