如何从Reactjs调用Web服务(How to call the webservice from Reactjs)

 我正在研究我正在使用带有webpack的Reactjs的示例。 如何从reactjs组件调用web服务并将结果传递给html文件 
 
 我试过superagent，http-browserify等所有这些都给了我同样的错误： 
 
 
 
 未捕获的TypeError：无法读取未定义的属性'get'。 
 
 
 下面是我调用API的视图组件 
 
import React from 'react'
import FindpersonStore from'../stores/FindPersonStore';
import PersonAPI from'../utils/PersonAPI';

var FindPerson = React.createClass({
    handleGoClick()
    {
        PersonAPI.getPerson(this.refs.personIdInput.getDOMNode().value);
    },

    render(){

         return(
        <div>
            <p>person Id <input type="number" value={this.props.personId} ref="personIdInput" /></p>    
            <input type="Submit" onClick={this.handleGoClick}/>
        </div>
        );
    }
});
export default FindPerson
 
 API就是 
 
import FindPersonAction from'../actions/FindPersonAction';
import {request} from 'superagent';

module.exports = {

  // Load mock product data from localStorage into ProductStore via Action
  getPerson: function(personId) {
    var url = "http://localhost:8080/SampleWebService/service/find?id="+personId

    request
        .get(url)//This is giving me error
        .end(function(res){
            if (res.status === 404) {
                        reject();
                    } else {
                         var data = JSON.parse(res);
                         FindPersonAction.findPerson(data);
                    }
        })

  }

};

I am working on sample for which I am using Reactjs with webpack. How to call a webservice from reactjs components and pass the result to html file
 
I tried superagent, http-browserify etc All of them giving me same error :
 
 
 
Uncaught TypeError: Cannot read property 'get' of undefined.
 
 
Below is the view component from where I am calling the API
 
import React from 'react'
import FindpersonStore from'../stores/FindPersonStore';
import PersonAPI from'../utils/PersonAPI';

var FindPerson = React.createClass({
    handleGoClick()
    {
        PersonAPI.getPerson(this.refs.personIdInput.getDOMNode().value);
    },

    render(){

         return(
        <div>
            <p>person Id <input type="number" value={this.props.personId} ref="personIdInput" /></p>    
            <input type="Submit" onClick={this.handleGoClick}/>
        </div>
        );
    }
});
export default FindPerson
 
And The API is 
 
import FindPersonAction from'../actions/FindPersonAction';
import {request} from 'superagent';

module.exports = {

  // Load mock product data from localStorage into ProductStore via Action
  getPerson: function(personId) {
    var url = "http://localhost:8080/SampleWebService/service/find?id="+personId

    request
        .get(url)//This is giving me error
        .end(function(res){
            if (res.status === 404) {
                        reject();
                    } else {
                         var data = JSON.parse(res);
                         FindPersonAction.findPerson(data);
                    }
        })

  }

};

原文：https://stackoverflow.com/questions/33006976