かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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に書いてあるとして…。 適当に用意したPOStの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で返す。というのをしないと上の設定が有効になりませんでした。ハイ。