//tips
//jsonserver操作
http://localhost:3000/にてpost処理を行い、jsonの内容を変更させる。
ターミナルからではなくブラウザのDevToolsのConsoleタブにて次のコードを実行。
fetch('/articles', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'title': 'react',
'author': 'facebook'
})
}).then(res => res.json()).then(console.log);
右クリックで開ける検証ページに上記をペースト。
リソースを追加する場合はIDを含めず、対象とするリソースのエンドポイントURIのみを指定し、POSTメソッドを実行。
POSTメソッドによるAPIリクエストが発行されると、送信されたJSONにIDが付与され、新規リソースデータとして追加登録されたのち、レスポンスデータとして返却される
/articlesのページに飛ぶと下記のようにid3で追加されている。
[
{
"id": 1,
"title": "json-server",
"author": "typicode"
},
{
"id": 2,
"title": "faker.js",
"author": "Marak"
},
{
"title": "react",
"author": "facebook",
"id": 3
}
]
リソースを更新する場合は、エンドポイントURIの末尾に更新対象とするIDを指定し、PUTメソッドを実行。
fetch('/articles/3', { // IDに3を指定
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'title': 'angular',
'author': 'google'
})
}).then(res => res.json()).then(console.log);
Id3の部分が下記のように変更された。
{
"title": "angular",
"author": "google",
"id": 3
}
リソースを削除する場合も更新処理と同様に、削除対象とするリソースIDを含めたURIを指定し、DELETEメソッドを実行。データ送信は不要なため、POSTやPUTの場合と異なりheadersやbodyプロパティの記述は不要。
fetch('/articles/3', {method: 'DELETE'}).then(console.log);
これで追加部分が削除できた。
fetch~の部分はなんなのか調べていると、Fetch APIというツールであることがわかった。
ブラウザからAPIへ通信を行う方法としてよく知られているのは XMLHttpRequest 、jQuery やAxios などのJavaScript ライブラリが有名で、Fetch APIは、jQueryのAjaxによく似た書式で通信ができ、XMLHttpRequest よりもシンプルな記述が可能なため、使われていうよう。
コンソールで実行する際に表示されるPromiseは、JavaScriptのPromise オブジェクトと呼ばれるもので、REST APIからデータが取得できるのを待って、次の処理に進むことを可能にする。
REST APIとの通信は、ネットワークの状況やサーバーの処理速度によって、データ受信までの時間がかかる場合があるが、JavaScript は非同期で処理を行う言語で、データ受信を待たずに次の処理に進でしまい、この問題の解決策として、Promiseオブジェクトが利用されている。
fetch('/articles', {
'/articles’部分が対象apiのuri
method: 'POST',
メソッドの指定。POSTをリクエスト。
headers: {
'Content-Type': 'application/json'
},
'Content-Type’の指定
body: JSON.stringify({
'title': 'react',
'author': 'facebook'
})
リクエストを行うとレスポンスデータresが返ってくるので、それをjsonにしてログとして出力。
}).then(res => res.json()).then(console.log);
Promiseはthen()を使うことでコールバックのような処理を実現できる。
例を見たらわかりやすかったの、日付データを元に西暦を取得する場合を下記に記載。
//日付データを取得する
function getDate() {
var date = new Date;
}
//日付データを元に西暦を取得する
function getYear(data) {
var year = data.getFullYear();
}
一般的にはこれで西暦が取得できるが、日付データがない場合には動作がうまくいかない。
そのようなケースを生まない為にコールバックで、必要な情報を確保して処理を実施するようにする。
function getDate(callback) {
callback(new Date);
}
getDate(function(data) {
getYear(data);
});
このコールバックによる記述はpromiseオブジェクトにより簡単に実現でき、下記のようになる。
var result = new Promise(function(resolve) {
resolve(new Date);
})
result.then( function(data){
console.log(data.getFullYear());
} );
Promise()の引数に関数を設定し、その中で行いたい処理を記述する。resolveに取得したい値を設定することで、非同期処理の結果を格納することができるようになる。
ここで変数resultに対してthenを使用することでコールバックと同様の効果を出しており、ラムダ式による省略も可能になり、さらに見やすくすることもできる。
result.then( (data) => console.log(data.getFullYear()) );
参考：
https://www.mdn.co.jp/di/tech/4720/70831/#
https://qiita.com/sotasato/items/31be24d6776f3232c0c0
