React.js
Pocket

Reactを使っていて、APIでどうのこうのする時、そのためだけにjQueryのAjax使うのはちょっと…ってなると思うので、SuperAgentを使ってみました。

SuperAgent

このブログでは過去にGitHub APIでリポジトリの一覧を取得する時などにFetchを使ってましたが、IEで動かなかったりするのでこの記事ではちゃんとライブラリを使ってみます。

目次
  1. SuperAgentをインストール
  2. 以前のFetchを使った書き方
  3. SuperAgentを使った書き方

SuperAgentをインストール

まずはSuperAgentをインストールします。

npm i superagent -S

package.jsonに追加されていればOKです。

以前のFetchを使った書き方

前回の記事はこちら

【React】Hello Worldから簡単なTodoアプリまでReactでいろいろ書いてみる

コードはこんな感じです。

import React from 'react'
import { render } from 'react-dom'
 
const REQUEST_URL = 'https://api.github.com/users/mismith0227/repos'
 
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: []
    };
  }
 
  componentDidMount() {
    this.fetchData()
  }
 
  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
    .then((responseData) => {
      this.setState({
        data: responseData,
      })
    })
  }
 
  render(){
    return(
      <ul>
        {this.state.data.map((item) => {
          return (
            <li key={item.id}>{item.name}</li>
          )
        })}
      </ul>
    )
  }
}
 
render(
  <App />,
  document.getElementById('app')
)

これを書き換えてみます。

SuperAgentを使った書き方

SuperAgentを使うとこうなります。

import React from 'react'
import { render } from 'react-dom'
import request from 'superagent'

const REQUEST_URL = 'https://api.github.com/users/mismith0227/repos'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: []
    };
  }

  fetchData () {
    request
      .get(REQUEST_URL)
      .set('Content-Type', 'application/json')
      .end((err, res) => {
        if (err) {
          console.log('error')
        }
        this.setState({
          data: res.body
        })
      })
  }

  componentDidMount() {
    this.fetchData()
  }

  render(){
    return(
      <ul>
        {this.state.data.map((item) => {
          return (
            <li key={item.id}>{item.name}</li>
          )
        })}
      </ul>
    )
  }
}

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

get以外にもpostやput、delなどもあります。

さいごに

SuperAgent以外にもaxios(読み方わからない)というのもオススメしてもらったので、また別の機会に使ってみようと思います。

参考にした記事

jQuery.ajaxの代わりにSuperAgentを使う

Qiita @hashrock

j今からはじめるReact.js〜サーバーとの通信〜

Qiita @kuniken
Pocket