DREAM符号化-FETCH

このレッスンではJavaScriptを使用してDREAMコードを無料で講義します.
ミニゲームのホームページ制作を行いました.
JavaScriptがどれほど難しいかを再認識する瞬間でもあります.
要するに、前回の授業では、jsonを通じてサーバとクライアントのインタラクションを実現する方法を学びました.
この部分はいつも未知の原因で間違いや絶望していますが、
解決策を見つけてよかった.
jsonを正しく記述してサーバに送信し、再インポートするのも面倒です.
htmlファイルをクリックして実行したわけではありません.
実際にはサーバにあるはずです.
彼もそうすべきではない.オフラインでサーバーと通信することは不可能だからだ.
要するに,vscにliveserverをインストールすると,Web上の反映がリアルタイムで見られる.
では、これからはjsonでhtml内のリストにリアルタイムで反映してみましょう.

json

まず.jsonファイルとデータとコードを分けることに慣れています.
なぜなら、データとコードが一緒にいると、管理メンテナンスが困難になるからです.

jsonはobjectのようにkeyとvalueで区切って書くことができます.
そして中かっこで括ると終わりです.
そのサーバーには本当にデータがありますか?
確認するには、JavaScriptファイルを開き、fetch apiでインポートするだけです.
fetch()はブラウザからapiをリモートでロードできる関数です.
以前,apiをリモートで導入するためにはjクエリのようなライブラリが必要であることを学習した.
ただし、fetchを使用するとより簡単にロードできます.

まずfetchの基本構造は上の写真と似ています.
これは私が自分で作ったもので、原型はもっと下に似ています.

<script>
fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });
  </script>

ここでresは任意の名前を使用できます.ただしfetchでは、デフォルトでresponseというパラメータを受信することを覚えておくだけです.
ここに見えるのは次にfetchを実行するときに行う次のコードとして想像することができる.
JavaScriptは非同期なので、サーバがデータを呼び出すとき.当時のコードを実行できるからです.
再度、fetch("~.json")が実行されると、サーバにファイルを要求し、待機中にコマンドを実行する.
最初のコードをもう一度見てみましょう

jsonファイルを呼び出し、応答パラメータからjsonのitemsを選択するプロセス.
これにより、サーバ上のjsonファイルのプロジェクトグループを正常に表示できます.
読み込んだファイルを表示するプロセスです.

まずコンテナを指定し、その部分にinnerHtmlを配置します.
この場合mapを使うことができ、
これは,配列を変換したり制御したりする際にmapが適切であるためである.
例えば//

<script>

num = [1,2,3,4,5]
result = num.map(num => num*num)

console.log(result);
result = [1,4,9,16,25]

</script>

このように出力します.
したがって、mapでitems内にcreateHTML String()関数を挿入し、join(")を行えばよい.
このとき前述の関数は存在しないので、これから定義します.

ベクトルで文字列を返すようにします.
また、この文字列はhtml内で変換されたコードで、コードを挿入するようになっています.
そして最後.

このように関数を実行すると、html内でjsonのアップロード状況に基づいて更新されたアイテムを表示できます.