TypeScriptを使ってwhatwg-fetchを使ってライトウェイトにAJAXしたい

Reactを使ってるとAJAX通信のためだけにjQueryを参照することもあります。でも、それだけに使うにはあまりにもヘビーだ。ということで、色々検索してたらwhatwg-fetchというものがあることを知りました。これを使ってみましょう。

github.com

インストール

私はnpm install whtawg-fetchをして、その中からfetch.jsをプロジェクトのscriptsフォルダに突っ込みました。

tsd install whatwg-fetchをして型定義ファイルもゲットしてきます。

下準備

fetch(whatwgうつのがだるくなった)は、importとかで使えないっぽいので、index.htmlに直接scriptタグで埋め込みます。TypeScriptでもreferenceタグを使って使えるようにしておきます。

使ってみよう

基本的な使い方は全部GitHubに書いてあるとして…。 適当に用意したPOSｔのAPIを呼んでみた。動いた。

fetch('api/Users', {
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    method: 'post',
    body: JSON.stringify({ name: 'okazuki' })
})
    .then(x => {
        if (!x.ok) {
            throw Error();
        }
        return x.json();
    }).then(x => {
        var p = x as { name: string };
        console.log(p.name);
    }).catch(e => console.log(e));

関係ないところで躓いたところ

ASP.NET WebAPI2でCamlCaseにする。

WebApiConfig.csに以下の1行を追加する。

config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

WebAPIの戻り値は、Jsonで返さずにOkで返す。というのをしないと上の設定が有効になりませんでした。ハイ。