📥 fetch

fetchはHTTP通信機能を提供するWEB APIであり、XMLHttpRequestオブジェクトに類似している.const promise = fetch(url [options])

fetchはXMLHttpRequestよりも通信しやすい.

XMLHttpRequestとfetchを比較します.
XMLhttpRequest

const promiseGet = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("Get", url);
    xhr.send();

    xhr.onload = () => {
      if (xhr.status === 200) resolve(JSON.parse(xhr.response));
      else reject(new Error(xhr.status));
    };
  });
};

promiseGet("https://jsonplaceholder.typicode.com/posts/1");

fetch

fetch("https://jsonplaceholder.typicode.com/posts/1")

確かに取り方が簡潔です.

Fetch()は、HTTP応答の応答対象を示すパッケージの承諾を返す.
従って、promisの後続処理方法(then、catch、finally)を用いることができる.

また、fetchのデフォルトではHTTPリクエストメソッドは「GET」であり、変更したい場合はメソッドを2番目のパラメータに変更できます.

fetch()の2番目のパラメータとして、HTTPリクエストメソッド、HTTPリクエストヘッダ、ペイロード等を対象として設定することができる.

応答結果を得るために,応答オブジェクトのjson法を用いることができる.
jsonメソッドは,応答オブジェクトからHTTP応答体を取得する.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((json) => console.log(json));