読者です 読者をやめる 読者になる 読者になる

【JavaScript実験】 Fetch

JavaScript

FetchはXHRと同様に外部との通信を扱う。

https://cosmology233.github.io/sandbox/hatena/2016/08/16/

scripts/script.js

{
  // fetchの実行
  fetch("./data/users.xml").then(res => {
    /* レスポンスデータの整形 */
  });
}

Fetchの実行は fetch メソッドで行う。

引数に送信先のURLを指定するだけ。返り値はPromiseとなるため、 then でチェインする。

{
  // fetchの実行
  fetch("./data/users.xml").then(res => {
    /* レスポンスデータの整形 */

    // テキストデータを返す
    return res.text();
  }).then(resText => {
    /* 整形したデータを使用した処理 */
  });
}

text メソッドはレスポンスデータをテキスト形式にする。他に jsonblob などの整形用メソッドが用意されている。

整形したデータを返したら、さらに then でチェインし、データを使用した処理を書いていく。

{
  // fetchの実行
  fetch("./data/users.xml").then(res => {
    /* レスポンスデータの整形 */

    // テキストデータを返す
    return res.text();
  }).then(textData => {
    /* 整形したデータを使用した処理 */

    // XMLをパースするためのパーサーの用意
    let parser = new DOMParser();

    // テキストデータをXMLデータに変換
    let xmlData = parser.parseFromString(textData, "text/xml");

    // XMLデータからユーザの情報を取得して出力
    printXMLData(xmlData);
  });
}

fetch メソッドを使用して外部XMLを取得する場合、処理の中でXMLのパースを明示的に行わなければならない。

下でXHRを使用した場合のコードと比べてみた。 fetch を使用したコードはアロー関数の記法を使って少し簡潔にしてある。

printXMLData メソッドはGithubのコードを参照。XMLのデータを出力するだけ。

{
  fetch("./data/users.xml")
      .then(res => res.text())
      .then(textData => {
    let parser = new DOMParser();
    let xmlData = parser.parseFromString(textData, "text/xml");

    printXMLData(xmlData);
  });
}

{
  let xhr = new XMLHttpRequest();

  xhr.open("GET", "./data/users.xml");
  xhr.addEventListener("load", (ev) => {
    let xmlData = ev.target.responseXML;

    printXMLData(xmlData);
  });

  xhr.send();
}