WebDesign Dackel

SuperAgentでJSONPを取得してみる

SuperAgentでJSONPを取得してみる

Hatena0
Google+0
Pocket0
Feedly0

はじめに

React.jsを使っていて非同期処理がしたくなりました。これまでだったらjQuery#ajax()を使っていたけど、非同期処理だけのために入れるのものなぁ〜と思っていたらそのものズバリな記事がありました。

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

「こういうのこういうの〜!」ってなっていたけど、superagentjsonpには対応していないみたいだったので、探してみたらsuperagent-jsonpというのが使えそうだったので早速試してみました。

superagent-jsonpの基本的な使い方

僕自身まだあまり試せてはいないのですが、superagentの基本的な使い方はQiitaの記事がとても参考になりました。
ここではsuperagent-jsonpの使い方についてです。

また、今回の記事では基本的にwebpackまたはbrowserfyなど、requireが使える環境とAltJSCoffeeScriptを使って書いています。

まず、パッケージを読み込みます。

$ npm install --save superagent superagent-jsonp

実際のコードはこんな感じになります。

request = require("superagent")
require("superagent-jsonp")(request)


# URLは適当です
request
  .get("http://example.com/api/")
  .jsonp()
  .end((res) ->
    console.log res
  )

superagentを読みこんだあとにsuperagent-jsonpでラップして、superagent#end()の前にjsonp()を実行するだけで、他は素のsuperagentと同じ使い方です。

注意点

ここまでのコードだけだと、環境によってはsuperagent-jsonpを読みこんだ際にエラーが出てしまいます。。
原因は、underscore.jsが無いよ!みたいなことだったので、おとなしくunderscore.jsもインストールします。
もし既存のプロジェクトにunderscore.jsが入っていればエラーは出ないと思います…。(多分)

$ npm install --save underscore

Mediawiki APIで単語検索してみる

入力されたキーワードを元にwikipediaの記事を検索+一覧するだけの単純なサンプルを作ってみました。

サンプルアプリの動作イメージ

wikipediaの記事検索にはMediawiki APIを使いました。初めて使いましたが、めっちゃ便利ですね…!
Mediawiki APIの使い方に関しては下記がとっても参考になりました!

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>superagent-jsonpの簡単なサンプル</title>
</head>
<body>
  <form id="api-form">
    <input type="text" id="keyword" value="">
    <button type="submit">検索する</button>
  </form>
  <ul id="results"></ul>

  <script type="text/javascript" src="./js/app.bundle.js"></script>
</body>
</html>

今回、とにかくシンプルなサンプルにしたのでスタイルは当てていません。

JavaScript (CoffeeScript)

request = require("superagent")
require("superagent-jsonp")(request)


class WikiSearch
  WIKI_URL = "https://ja.wikipedia.org/wiki/"
  API_URL = "https://ja.wikipedia.org/w/api.php"

  constructor: ->
    @searchForm = document.getElementById("search-form")
    @keyword = document.getElementById("keyword")
    @results = document.getElementById("results")

    @searchForm.addEventListener("submit", (e) =>
      e.preventDefault()
      @search(@keyword.value.trim())
    )

  search: (keyword) ->
    request
      .get(API_URL)
      .query(
        format: "json"
        action: "query"
        list: "search"
        srsearch: keyword
      )
      .jsonp()
      .end((res) =>
        if res?.query
          @render(res.query.search)
        else
          @render([])
      )

  render: (items) ->
    lists = []

    for i, item of items
      lists.push("""
      <li>
        <a href="#{WIKI_URL}#{item.title}">#{item.title}</a><br />
        #{item.snippet}
      </li>
      """)

    @results.innerHTML = lists.join("n")


document.addEventListener("DOMContentLoaded", ->
  new WikiSearch()
)

まとめ

以上簡単でしたが、superagentからjsonpを扱ってみました。
外部のAPIを使う場合など、クロスオリジンに引っかかってしまうことがあると思うので、superagent-jsonpはそんな時に使いたいパッケージだなと思いました。