从 ReactJS 调用 REST Web 服务

Posted 2023-02-22

【中文标题】从 ReactJS 调用 REST Web 服务

【英文标题】：Calling a REST webservice from ReactJS

【发布时间】：2017-02-18 12:20:24

【问题描述】：

我试图调用 REST Web 服务从数据库中获取数据并将 JSON 对象返回给 ReactJS 应用程序。当我从浏览器访问 URL 时，它会显示 JSON 对象，但是当我尝试在其中呈现数据时表格没有内容显示。

我的示例代码如下所示

import React from 'react';
import $ from 'jquery'; 

export default class Members extends React.Component 
  constructor(props) 
    super(props);
    this.state =  users: [] ;
  

  componentDidMount() 
    $.ajax(
      url: "http://localhost:8080/users"
    ).then(function(data) 
        this.setState(
                    users:data
        );
    );
    
  render() 
    return (
     <UsersList users=this.state.users/>
    )
  


class UsersList extends React.Component 
    render() 
        var users = this.props.users.map(users =>
            <User key=user._links.self.href user=user/>
        );
        return (
            <table>
                <tbody>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                    users
                </tbody>
            </table>
        )
    

class User extends React.Component 
    render() 
        return (
            <tr>
                <td>this.props.user.firstName</td>
                <td>this.props.user.lastName</td>
            </tr>
        )
    

这是异步加载的问题吗？

【问题讨论】：

请问consolecomponentDidMount中的数据是什么？数据是什么？

跨源请求被阻止：同源策略不允许读取localhost:8080/users 的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。这是控制台输出

您使用哪种服务器端语言？如果是 nodejs 和 express 使用 npmjs.org/package/cors 包

【参考方案1】：

这可能会迟到，但我发现您的用户映射方法中对项目的变量引用存在问题。

这是你的代码

class UsersList extends React.Component 
  render() 
    var users = this.props.users.map(users =>
   <User key=user._links.self.href user=user/>
);

...

应该是这样的

class UsersList extends React.Component 
  render() 
    var users = this.props.users.map(user =>
   <User key=user._links.self.href user=user/>
);

...

注意map函数中变量名从“users”改为“user”。

【参考方案2】：

@Alireza：感谢您的帮助。 我能够从当前看起来像

的服务中获取 JSON 对象

  "_embedded" : 
    "users" : [ 
      "firstName" : "Harshal",
      "lastName" : "Patil",
      "location" : "ABC",
      "userId" : "USR_1",
      "_links" : 
        "self" : 
          "href" : "#urlLink"
        ,
        "user" : 
          "href" : "#urlLink"
        
      
     ]
  ,
  "_links" : 
    "self" : 
      "href" : "#urlLink"
    ,
    "profile" : 
      "href" : "#urlLink"
    
  

我已经使用 Spring Data Rest 进行 Web 服务实现，并且了解超媒体标头 (HAL) 包含在 json 对象中。在 React 应用程序中呈现时，有什么方法可以忽略这些标头数据？ 目前 JSON 对象在解析时在第 2 行抛出错误。

【参考方案3】：

根据this 问题，JSONP 或“带填充的 JSON”是一种在 Web 浏览器中运行的 javascript 程序中使用的通信技术，用于从不同域中的服务器请求数据，这是典型的 Web 浏览器所禁止的，因为相同 -原产地政策。 JSONP 利用了浏览器不对脚本标签强制执行同源策略这一事实。请注意，要使 JSONP 工作，服务器必须知道如何使用 JSONP 格式的结果进行回复。 JSONP 不适用于 JSON 格式的结果。尝试在 Ajax 调用中使用 JSONP。它将绕过同源策略。像这样：

  componentDidMount() 
    $.ajax(
      url: "http://localhost:8080/users",
      async:true,
      dataType : 'jsonp'   //you may use jsonp for cross origin request
      crossDomain:true,
    ).then(function(data) 
        this.setState(
                    users:data
        );
    );
    

*** 上的好答案：jQuery AJAX cross domain