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 文件 。