RealPath:
WebPath:
2017/05/21 14:00 (JST) 更新
REST API >>

JavaScriptによるアクセス

Contents

ASP.NET MVC に限定しない一般の話になりますが、
REST API (を含むインターネット上のリソース) に対して JavaScript からアクセスする手段としては、以下のような選択肢があります。

  • XHR (XMLHttpRequest) … 構文がややこしい。
  • jQuery.ajax … 簡単に書けるが、jQuery が必ず必要。
  • fetch … jQuery.ajax 並みに簡単に書ける。最近のブラウザであればライブラリが無くても利用できる、はず。

時代が進むとともに、主に使われる仕組みは上の XHR → jQuery.ajax → fetch と変化してきました。
昔の仕組みもまだ使えますが、今から覚える必要は滅多に無いかと思います。今回は fetch により REST API アクセスを行う方法を紹介します。

GET アクセス例

/api/Values に GET アクセス。

fetch による GET アクセス例
fetch('/api/Values').then(function (response) {
    return response.text();
}).then(function (text) {
    console.log('RESULT: ' + text);
});
結果
RESULT: ["value1","value2"]

POST アクセス例

/api/Values に POST アクセス。

fetch による POST アクセス例
fetch('/api/Values', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify("hello")
}).then(function (response) {
    return response.text();
}).then(function (text) {
    console.log("RESULT: " + text);
});
結果
RESULT:

PUT 例

(clock-up-events における例) /api/user/areas に PUT アクセス。

fetch による PUT アクセス例
var areaKeys = ['tokyo', 'saitama'];
fetch('/api/user/areas', {
    method: 'PUT',
    credentials: 'include', // ※認証情報も含めて渡す
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(areaKeys)
}).then(function (response) {
    return response.json();
}).then(function (json) {
    console.log("saved: " + JSON.stringify(json));
});
結果
saved: ["tokyo","saitama"]

DELETE 例

/api/Values に DELETE アクセス。

fetch による DELETE アクセス例
fetch('/api/Values/10', {
    method: 'DELETE',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
}).then(function (response) {
    return response.text();
}).then(function (text) {
    console.log("RESULT: " + text);
});
結果
RESULT: