HTTP GET 请求

有时，组件需要从远程端点（例如 REST API）呈现一些数据。一个标准的做法是使 componentDidMount 法这样的调用。

这是一个例子，使用 superagent 作为 AJAX 助手：

import React from 'react'
import request from 'superagent'

class App extends React.Component {
  constructor () {
    super()
    this.state = {}
  }
  componentDidMount () {
    request
      .get('/search')
      .query({ query: 'Manny' })
      .query({ range: '1..5' })
      .query({ order: 'desc' })
      .set('API-Key', 'foobar')
      .set('Accept', 'application/json')
      .end((err, resp) => {
        if (!err) {
          this.setState({someData: resp.text})
        }
      })
  },
  render() {
    return (
      <div>{this.state.someData || 'waiting for response...'}</div>
    )
  }
}

React.render(<App />, document.getElementById('root'))

可以通过在 request 对象上调用适当的方法启动请求，然后调用 .end() 发送请求。设置标题字段很简单，使用字段名称和值调用 .set()。

.query() 方法接受对象，当与 GET 方法一起使用时将形成查询字符串。以下将产生路径/search?query=Manny&range=1..5&order=desc。

POST 请求

request.post('/user')
  .set('Content-Type', 'application/json')
  .send('{"name":"tj","pet":"tobi"}')
  .end(callback)

有关更多详细信息，请参阅 Superagent 文档 。