JavaScript TIL 18

5412 ワード
テキストリンク
2021年7月27日に書かれた書類4号.
JavaScriptの勉強内容を整理しました.

fetchリクエストネットワークの使用


非同期リクエストの典型的な例:ネットワークリクエスト
ネットワークを介して送信されるリクエストには、さまざまな形式があります.最も一般的なケースは、URLリクエストを使用することです.URLでリクエストできるAPIがfetch APIです.
  • データを動的に受信する必要がある情報:最新のニュース、天気/スモッグ情報
    • この場合、多くのウェブサイトは、要求APIのみを使用して情報を更新する.この内容は、一般的なfetch APIの1つを使用してリモートURLから情報をロードする場合について説明する.次の図は、リモートURLから情報を取得し、特定のDOM領域を更新する概念を示す.
  • fetch API:特定のURLから情報を受信する役割
    このプロセスは非同期であるため、時間がかかる場合があります.この時間のかかる操作が要求される場合、ブロックは発生しないでください.そのため、特定のDOMが情報を表示するまでロードウィンドウを置き換えることがあります.

    • fetch APIの使い方


    リモート要求と受信データのURLは以下の通りです.
  • 最新メッセージ:https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=最新情報2
  • 天気情報:https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=天気&row id=22
    • // 개발자 도구의 콘솔에서 fetch API를 사용하여 데이터를 요청
let url =
  "https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=최신뉴스";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));
  • fetch APIはPromiseの形で実現される.
    • //개발자도구의 콘솔에서 fetch API를 사용하여 데이터를 요청
fetch(url)
  .then((response) => response.json()) // 자체적으로 json() 메소드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달합니다
  .then((json) => console.log(json)) // 콘솔에 json을 출력합니다
  .catch((error) => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다
    Written with StackEdit .
    クラシック海賊分金問題(hdu 1538)
    Gsonチュートリアル10:Exclusion Strategies