Question

我使用ReactJS消费Web服务（API）是全新的;我有一个网页，其中包含一个除用户名和密码之外的登录表单，然后通过单击登录按钮允许用户访问。前端是使用ReactJS开发的。

前端代码：

 <form action="">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember"> Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

...我正在使用Postman来测试在登录页面后面运行的Web API Rest服务。通过邮递员返回的结果是{＆＃34;用户名＆＃34;：＆＃34; Jdoe＆＃34;，＆＃34; firstName＆＃34;：＆＃34; John＆＃34;，＆＃34;姓氏＆＃34 ;：＆＃34; Doe＆＃34;，＆＃34;密码＆＃34;：null，＆＃34;令牌：＆＃34; ＆＃34; ty77fakenumber＆＃34; }

...我的问题是如何开始将此API处理到我的ReactJS页面。我需要实现一个HTTPServiceRequest吗？非常感谢任何帮助。

Answer 1

您可以在componentDidMount生命周期方法中使用fetch API并将结果存储在状态中。

简单GET的例子：

componentDidMount() {
  fetch(‘/endpoint’)
  .then(res => res.json())
  .then(json => this.setState({users: json)))
}

Answer 2

根据上面提出的要求，我假设这指的是要求Rest服务获取结果的HTTP请求。我建议使用Fetch API从Rest Service获取数据。这是一个异步HTTP请求调用来获取数据。获得数据后，您还需要一个状态管理框架，您可以在其中存储数据并在组件上使用它。在React世界中，以下是流行的州管理框架：

Flux
Redux

当然，您可以在没有这些框架的情况下存储api响应，但我假设您将更多地使用React，一旦您的应用程序变得更大并且更新的组件不断获得，状态管理就会变得麻烦而没有状态管理框架加上。

ReactJS使用asp.net Rest Service

2 个答案: