≡

Mithril 1.1.0

jsonp(options)

説明

JSON-Pリクエストを行います。この機能はCORSが有効化されておらず、JSON-Pだけが行えるサーバーとのインタラクションを行うときに有用です。

m.jsonp({
    url: "/api/v1/users/:id",
    data: {id: 1},
    callbackKey: "callback",
})
.then(function(result) {
    console.log(result)
})

シグニチャ

promise = m.jsonp([url,] options)

引数 型 必須 説明
url String No これが指定されると{url: url}というオプションが指定されるのと同じです。options引数に渡されたオプションは、この短縮形式のデフォルトオプションを上書きします。
options.url String Yes リクエストを送る先のURLです。。URLは絶対パスでも相対パスでも使用できますし、 変数（interpolation）を含むことも可能です。
options.data any No このデータはURLの変数に挿入されたり、クエリー文字列としてシリアライズされます。
options.type any = Function(any) No レスポンスの中でオブジェクトごとに適用されるコンストラクタです。デフォルトは恒等写像（入力をそのまま返す関数）です。
options.callbackName String No コールバックとして呼び出される関数名です。デフォルトでは、_mithril_6888197422121285_0({a: 1})のような乱数を含む文字列が設定されます。
options.callbackKey String No コールバック名を渡すためのクエリーパラメータ名です。デフォルト値はcallbackで、/someapi?callback=_mithril_6888197422121285_0のようになります。
options.background Boolean No このパラメータをfalseにすると、リクエスト完了時にマウントされているコンポーネントを再描画します。trueの場合は再描画を行いません。デフォルトはfalseです。
返り値 Promise レスポンスのデータが解決された時に呼び出されるPromiseです。typeメソッドの実行後に解決します。

シグニチャの読み方

どのように動作するのか

m.jsonpユーティリティはJSON-Pフォーマットでデータを返すサードパーティAPIに対して使います。

簡単に説明すると、JSON-Pはsrc属性が自分でCORSの制御ができないサーバーを向いているscriptタグを生成します。通常であれば、グローバル関数を定義して、その名前をスクリプトのURLのクエリー文字列に定義します。このHTTPレスポンスはクライアントで用意したグローバル関数を呼び出す形式のソースコードを返します。サーバーで返したいデータはこの関数の最初のパラメータとして返ってきます。

JSON-Pにはいくつか制限があります。まず、GETリクエストしか使用できません。また、サードパーティサーバーが悪意のあるコードを提供しないと信用する必要があります。また、グローバルのJavaScriptのスコープに関数を設置する必要があり、名前空間の汚染があります。そのような欠点があっても、サーバーがCORSをサポートしていない場合などには、これしかサービスからデータ取得する方法がないことがあります。

一般的な使用法

callbackクエリー文字列があった場合には、その関数に対するコールバックを生成する、デファクトスタンダードに従ったサービスを使うのであれば、特に設定しなくてもm.jsonpを使用できます。

m.jsonp({url: "https://api.github.com/users/lhorie"}).then(function(response) {
    console.log(response.data.login) // 出力: "lhorie"
})

この規約に従わず、サービスが指定するコールバック関数を使う必要がある時はコールバック関数のキーを指定する必要があります:

m.jsonp({
    url: "https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json",
    callbackKey: "jsoncallback",
})
.then(function(response) {
    console.log(response.link) // 出力: "https://www.flickr.com/photos/tags/kitten/"
})

あまり更新されないデータに対しては、同一のキー名を使うように指定するとHTTPのキャッシュのメリットが享受できます:

// このリクエストは同じクエリー文字列で毎回呼び出されるため、キャッシュ可能
m.jsonp({
    url: "https://api.github.com/users/lhorie",
    callbackName: "__callback",
})
.then(function(response) {
    console.log(response.data.login) // 出力: "lhorie"
})
License: MIT. © Leo Horie.