Blockchain code Metaverse VR

Unity×VR×Blockchain(214)

スポンサーリンク

//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

【JavaScript入門】誰でも分かるPromiseの使い方とサンプル例まとめ!

 

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2021 All Rights Reserved Powered by AFFINGER5.