与RESTful后端API服务进行反应入门工具包通信

Question

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

我有一个后端API服务器正在运行,我正在寻找一个前端框架.然后我遇到了这个似乎是一个很好的候选人的反应初学者工具包.

我的理解是,我一次只处理一个反应组件.我可以将所有代码逻辑(如API调用,DOM元素更改等)放在componentDidMount()中,这样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;

这是我试图破解的反应组件的原始代码.我试图包含"请求"模块,以便我可以发出http请求.

var request = require('request');  // for backend API calls

componentDidMount() {
    request('https://www.google.com')
}

它没用.那我在这里做错了什么？谢谢.

错误消息很长,从以下消息开始.

./~/request/lib/har.js中的错误找不到模块:错误:无法解析/ Users/ssmlee04/Desktop/react-starter-kit/node_modules/request/lib @ ./~/request中的模块'fs' /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.这里是repo https://github.com/github/fetch的链接.