从 React App 访问 API 的最佳方式？

Question

我使用 React 应用访问 API 的最佳方式是什么？ API 目前是在 Golang 中使用 kami & mgo 为 POST/GET/DELETE 请求开发的。

我希望能够向以下对象发出 GET 请求 URL：

http://user:password@localhost:8000/api/v1/systems

在我的 React 应用程序上并将结果存储在状态属性中：

this.state = {
    data: //store the data here
}

我也想在页面加载时加载这些数据，所以也许我应该使用 componentDidMount() 函数来处理这个？

我从来没有在 React 上使用过 API 调用，所以我想知道这里是否有人可以告诉我一个好的方法？

编辑

我正在使用 React 15.3.2。

编辑 #2

我看过 fetch 来处理请求，但我仍然不确定如何在我的情况下使用它。我在 localhost:3000 上安装了 React 应用程序运行，在 localhost:8000 上安装了 api 运行，/api/v1/systems 将 return JSON 格式如下：

{ systems : [ //list of objects ] }

我在 componentDidMount() 中尝试了以下操作：

fetch(myRequest) 
  .then(result => {
    console.log(result);
    //this.setState({ data: result.json() });
    });

不太确定 myRequest 应该是什么（尝试使用 URL 的简单字符串：'http://localhost:8000/api/v1/systems'）而且我也不确定应用程序所在的端口是否运行可能会引起冲突什么的。

Answer 1

您必须决定一个库来进行 API 调用。一种简单的方法是使用现代浏览器中内置的 fetch。 polyfill to cover older ones. jQuery's AJAX or SuperAgent 有两种选择。这是一个使用 fetch 的简单示例。您只需更改请求的 URL。

class Example extends React.Component {
  constructor() {
    super();
    this.state = { data: {} };
  }
  componentDidMount() {
    var self = this;
    fetch('http://reqres.in/api/users')
      .then(function(response) {
        return response.json()
      }).then(function(data) {
        self.setState({ data }, () => console.log(self.state));
      });
  }
  render() {
    return (
      <div/>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

从 React App 访问 API 的最佳方式？

Best way to access API from React App?

javascript

fetch

reactjs