JSを使用したJSONと非同期の学習
kurumin
プログラミングのーと
JavaScriptのAJAX通信
kurumin
非同期通信を用いてHTTP通信によりコンテンツを表示するプログラミング手法
JavaScript→JSON
JSON.stringify(JSON文字列に変換したいオブジェクトや値)JSON→JavaScript
JSON.parse(JavaScriptに変換したいJSONデータ)asyncとawait
- await・・・通信のような”待ち”が発生する処理に付ける
- async・・・↑を呼び出している関数に付ける
async function displayMessage() {
/**
* @type {object} サーバーにリクエストし、レスポンスを受ける。
* オブジェクト型ではあるがこのままでは使いづらい？
*/
const response = await fetch('./hello.json');
/**
* @type {object} 使いやすいオブジェクトに変換
*/
const data = await response.json();
const messageElm = document.getElementById('message');
messageElm.innerHTML = data.message;
}
displayMessage();
fetch()・・・サーバへリクエストを送るメソッド
response. json()・・・jsonメソッドを実行。オブジェクトに変換される。
ABOUT ME
