React启动工具包与RESTful后端API服务的通信

Question

https://github.com/kriasoft/react-starter-kit

我有一个后端API服务器正在运行，我正在寻找一个前端框架。然后我发现了这个反应首发套件，似乎是一个很好的候选人。

我的理解是，我一次处理一个反应组件。我可以把所有的代码逻辑，比如API调用、DOM元素更改。。。。等等，这样DOM和逻辑之间就会有交互。(我说得对吗？(

import React, { PropTypes } from 'react'; // eslint-disable-line no-unused-vars
import styles from './ContactPage.less'; // eslint-disable-line no-unused-vars
import withStyles from '../../decorators/withStyles'; // eslint-disable-line no-unused-vars
@withStyles(styles)
class ContactPage {
  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired
  };
  render() {
    let title = 'Contact Us';
    this.context.onSetTitle(title);
    return (
      <div className="ContactPage">
        <div className="ContactPage-container">
          <h1>{title}</h1>
          <p>...</p>
        </div>
      </div>
    );
  }
}
export default ContactPage;

这是我试图破解的react组件的原始代码。我尝试包含"请求"模块，这样我就可以进行http请求。

var request = require('request');  // for backend API calls
componentDidMount() {
    request('https://www.google.com')
}

它不起作用。那么我在这里做错了什么？谢谢

错误消息很长，从以下消息开始。

中的错误/~/request/lib/har.js找不到模块：错误：无法解析/Users/ssmle04/Desktop/react-starter-kit/node_modules/request/lib中的模块"fs"@/~/request/lib/har.js 3:9-22

Answer 1

Request.js是Node的lib。它不应该在浏览器中使用。这就是您看到错误module fs not found的原因。fs是节点js的文件系统模块。

由于您已经在使用ES6，我建议您使用fetch(https://fetch.spec.whatwg.org/)以向远程服务器发出请求。chrome和firefox已经支持它了。为了与旧浏览器兼容，您可以使用github中的fetch polyfill。这是回购的链接https://github.com/github/fetch.