javascript - 如何从 React 组件中的 Express 端点获取数据？

Question

我有一个简单的 react 组件和返回字符串“样本数据”的表达端点。我只是想在我的 react 应用程序中点击该端点并将文本存储在状态中并将其显示在屏幕上。

我的组件:

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    this.callBackendAPI()
      .then(res => this.setState({ data: res.data }))
      .catch(err => console.log(err));
  }

  async callBackendAPI() {
    const response = await fetch('/sampleData');
    const body = await response.json();

    if(response.status !== 200) {
      throw Error(body.message)
    }
    return body;
  }

  render() {
    let data = this.state.data || 'there is no data';

    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">{data}</p>
      </div>
    );
  }
}

export default (App);

后端端点:

app.get('/sampleData', function(req, res) {
  res.send('sample data');
});

我不确定是否需要 response.json() 因为端点只返回纯文本，实际上我收到此代码的错误 SyntaxError: Unexpected token s in JSON atposition 0。当我只使用 response 时，没有任何反应，并且文本仅显示为“没有数据”，因为状态为空。

如何将端点中的文本获取到组件状态并显示在屏幕上？

谢谢!

Answer 1

响应是 Response目的。当读取 HTTP 响应头而不是响应正文时，fetch 将为您提供访问权限 - 这就是为什么您必须在 response.json() 上 await，因为在完成传输之前您无法解析正文数据。

从Response读取纯文本时也适用同样的原则 - 您需要在response.text()上await，以允许响应完成读取。在这种情况下，您还需要修改 setState 和 Error ，因为 body 只是一个字符串，而不是一个对象。

这可能看起来有点不直观，但这是有充分理由的 - 因为一旦响应开始传输，您就会收到响应，您可以在响应的其余部分仍在加载时根据状态/HTTP header 采取操作。