React 节点 API 请求设计模式

Posted 2023-03-07

【中文标题】React 节点 API 请求设计模式

【英文标题】：React Node API Request Design Pattern

【发布时间】：2015-10-27 07:23:54

【问题描述】：

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

除了在 node 中搞乱之外，这是我第一次使用 Node 的生产体验，我想知道我的思维过程是否正确，如果不正确，更好的方法。

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

这个想法是，它会在 React 组件中调用 Node 应用程序，而 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
);

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

【参考方案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 代码中，你只需要调用 store 的方法，这会让你的 UI 代码变得干净。我通常自己创建一个 store 类而不使用 Flux。

【讨论】：

这正是我们最终的做法。感谢您的验证。