React 初学者工具包与 RESTful 后端 API 服务的通信

Question

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

我有一个后端 API 服务器运行，我正在寻找一个前端框架。然后我遇到了这个 react-starter-kit 似乎是一个不错的选择。

我的理解是我一次处理一个反应组件。我可以将所有代码逻辑（例如 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;

这是我试图破解的反应组件的原始代码。我试图包含 "request" 模块，以便我可以发出 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 中解析模块 'fs' @./~/request/lib/har.js3:9-22

Answer 1

Request.js 是 Node.js 的库。它并不意味着在浏览器中使用。这就是您看到错误 module fs not found 的原因。 fs是node js的文件系统模块。

因为你已经在使用 ES6 我建议使用 fetch (https://fetch.spec.whatwg.org/) to make request to the remote server. It is already supported by chrome and firefox. To have compatibility with older browser you can use fetch polyfill from github. Here it is the link to the repo https://github.com/github/fetch.

React 初学者工具包与 RESTful 后端 API 服务的通信

React starter kit communication with RESTful backend API service

reactjs

frontend

web-component