Reactを使ってるとAJAX通信のためだけにjQueryを参照することもあります。でも、それだけに使うにはあまりにもヘビーだ。ということで、色々検索してたらwhatwg-fetchというものがあることを知りました。これを使ってみましょう。
インストール
私は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で返す。というのをしないと上の設定が有効になりませんでした。ハイ。