TIL 008 JavaScript_fetch()

2287 ワード
TIL JavaScript Fetch テキストリンク

🎯 非同期ネットワーク通信のfetch()を学習する。


1.要求ネットワーク

  • 発注
  • ユーザ情報の読み出し
  • サーバから最新の変更を取得
  • その他

    • 2. Fetch()

  • 必要に応じてサーバにリクエストを送信し、fetch()メソッドで新しい情報を受信します.
  • fetch()が呼び出され、ブラウザはネットワーク要求を送信し、インフラストラクチャに戻ります.
    • let fetchResponsePromise = fetch(resource [, init])
  • resource:読み込むリソース.A string or any other object with a stringifier — including a URL object — that provides the URL of the resource you want to fetch.
  • init:初期化用のオプションパラメータを定義

    • 3.Fetch()応答ステップ


    1)返される承諾は,サーバ上で応答ヘッダを受信すると,組み込みクラスの応答インスタンスとともに履行状態に入る.

  • まだ本文(body)が到着していないが、開発者は応答ヘッダを表示し、HTTPステータスを表示して、要求が正常に処理されたかどうかを判断することができる.
  • HTTPリクエストを送信できない場合、ネットワークに問題があるサイトまたは存在しないサイトに接続しようとすると、promiseは拒否されます.

    • 2)他のメソッドを呼び出して応答本文を取得する.

  • response.text():応答を読み出し、テキスト
    • に戻る
  • response.json():応答をJSON
    • に解析する
  • response.formData(), response.blob(), response.arrayBuffer()

    • or

    4. Options


    様々な初期設定はfetch()メソッドの2番目のparam initで行うことができる。


    1) method: POST, GET(default), POST, PUT, DELETE, etc.
    2) headers: Any headers you want to add to your request.
    3) credentials: same-origin, include or omit.
    4) body: JSON.stringify(data)
  • body data type must match "Content-Type"header.
  • A request using the GET or HEAD method cannot have a body.
    • 5) mode: cors, no-cors, or same-origin.
    6) etc...

    {例)urlからJSONオブジェクトとして結果をインポート


  • 方法Using async/await


  • 方法Using .そして(待つ必要はなくPrimisのみ使用)

    • 👀 参考資料
  • https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
  • https://ko.javascript.info/fetch
    • 機能依存性注入
    Hookメカニズム学習(四)-プラグインロードメカニズム