どのようなフェッチ

このフェッチAPIはかなり無粋です.JavaScriptのXmlHttpRequestで過去に動作していた場合や、jQueryやAxiosのようなライブラリに頼らなければならない場合は、どのようなフェッチを行うのかを本当に感謝します.フェッチは
をセットアップしやすい

約束ベース

設定可能な

主な不利な点は、この書き込みの時点で、それが不十分にサポートされているため、古いブラウザーをサポートするためにPreyFillsを使用する必要があります.一方、あなたは間違いなくあなたの手をこのAPIで汚しているはずです.基本的な例から始めましょう.JSON Placeholderを使用して、JSONファイルを取得し、そのデータをDOMに追加します.

var url = `https://jsonplaceholder.typicode.com/photos`;

getData(url)
  .then(data => {
    data.forEach( e => {
      var div = document.createElement("div"),
          content = document.createTextNode(e.title);
      div.appendChild(content);
      document.getElementById('content')
        .insertAdjacentElement('beforeend', div);
    })
  })
  .catch(error => console.error(error));

function getData(url){
  return fetch(url, {
      method: 'GET',
    })
    .then(response => response.json())
    .catch(error => console.error(`Fetch Error =\n`, error));
};

API呼び出しは2つのパラメータを取ります.最初はサーバAPIエンドポイントのURLです.二つ目はinitオブジェクトです.この単純な例ではHTTPリクエストメソッドを設定しています.
前述のように、これはすべての約束ベースです.これにより、データがサーバーから取得されている間、コードの実行を非同期的に継続できるようになります.GetData関数はGETリクエストをサーバに送信します.データが返されると、チェインthn ()関数は、JSONフォーマットの応答を持つ約束を元のメソッドに渡します.このメソッドは、各値をDOMに個別に付加するあらゆる値を通してデータとループを取ることができます.
この例ではGETリクエストを提出しましたが、アプリケーションで必要とされる標準メソッド( GET , POST , DELETE , PUT )のいずれかを使用できます.

var url = `https://jsonplaceholder.typicode.com/posts/1`;

postData(url)
  .then(data => {
    console.log('complete')
  })
  .catch(error => console.error(error));

function postData(url) {
  return fetch(url, {
    method: 'PUT',
    body: JSON.stringify({
      id: 1,
      title: 'This is a Test',
      body: 'Some Random Text',
      userId: 1
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
.then(response => response.json())
  .catch(error => console.error(`Fetch Error =\n`, error));
};

結果の出力は

アクセスコントロール(CORS、同じ原点)、キャッシュなどのフェッチメソッドの2番目のオプションパラメータを渡すことができる他のオプションがあります.これらのオプションは、MDN Pageによく記載されています.彼らがあなたの特定のユースケースに申し込むので、これらの各々を研究するために自由に感じてください.
あなたが以前にそれにさらされなかったならば、これはちょうどフェッチAPIを理解する短いプライマーでした.うまくいけば、このAPIは、あまりにも長い間ノームであったAPIエンドポイントを照会することと関連したstigmaのいくらかを取り除きます.Gdspeed .