Question

使用React应用程序访问API的最佳方法是什么？该API目前在Golang中使用kami＆amp; amp;用于POST / GET / DELETE请求的mgo。

我希望能够向以下网址发出GET请求：

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

在我的React app上

并将结果存储在state属性中：

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将返回一个具有以下格式的JSON：

{ systems : [ //list of objects ] }

我在componentDidMount（）中尝试了以下内容：

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

不太确定myRequest应该是什么（一直尝试使用简单的网址字符串：＆＃39; http://localhost:8000/api/v1/systems＆＃39;）我也不确定应用程序的端口正在运行可能会发生冲突或其他事情。

Answer 1

您必须决定使用库进行API调用。一种简单的方法是使用fetch，它是现代浏览器中内置的。有polyfill来覆盖旧版本。 jQuery's AJAX或SuperAgent是两种选择。这是使用fetch的简单示例。您只需要更改请求的网址。

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

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

1 个答案: