Web API Fetchの基本

Fetch APIの基本的なこと

Fetch APIと似ているものに、
XMLHttpRequest (XHR) オブジェクトがあります。

XHRは以前使われていましたが、
最近は、Fetch APIがより柔軟性があり、強力なので、
こちらの方が使われています。
このAPIにより、
ページ全体を更新する必要がなくなりました。
ウェブページの一部だけ、
データを更新することが可能になります。

地図サイトを考えて見ると、
この技術がいかに先見性があったか分かります。
地図をドラックするごとに、
ページ全体がリセットされ、
再描画するのであれば、
非常にレスポンスの悪いサイトになります。

この技術でJavaScriptは復帰しました。
最初にXMLHttpRequestを開発したのは、
マイクロソフト社だったのは、
やはり技術力の差が大きいと思います。

下はサンプルのコードです。
高村光太郎の9行の詩「道程」を、
4つに区切り、poem1、poem2、poem3、poem4としています。
これらのファイルは、*.txtとして、
HTMLファイルと同じデイレクトリーに置いています。
こうすると、
urlはファイル名だけで、Fetch APIが使えるようになります。

<script></script>の中で、
赤色の部分が、fetchメソッドです。
fetchの引数に、
取得するリソースのパスは必須です。


<h1>Fetchの基本</h1>

  <form>
    <label for="pic_up">選択</label>
    <select id="pic_up" name="pic_up">
      <option>poem 1</option>
      <option>poem 2</option>
      <option>poem 3</option>
      <option>poem 4</option>
    </select>
  </form>

  <h2>「道程」：<em>高村光太郎</em></h2>

  <pre>

  </pre>

<script>
    const poemChoose  = document.querySelector('select');
    const poemDisplay = document.querySelector('pre');

    poemChoose.onchange = function() {
       const poem = poemChoose.value;
       updateDisplay(poem);
    };

    function updateDisplay(poem) {
      poem = poem.replace(" ", "");
      let url = poem + '.txt';

      fetch(url).then(function(response) {
  　　　response.text().then(function(text) {
    　　　poemDisplay.textContent = text;
  　　　　});
　　　　});
    
    };

    updateDisplay('poem 1');
    verseChoose.value = 'poem 1';

</script>

スタイルは次の様になります。


html, pre {
    font-family: sans-serif;
  }

  body {
    width: 500px;
    margin: 0 auto;
    background-color: white;
  }

  pre {
    line-height: 1.5;
    letter-spacing: 0.05rem;
    padding: 1rem;
    background-color: white;
  }

  label {
    width: 100px;
    margin-right: 33px;
  }

  select {
    width: 200px;
    padding: 5px;
  }

Fetch APIの詳細は、下記サイトで参照できます。
MDN Web Docs

「道程」：高村光太郎
僕の前に道はない
僕の後ろに道はできる
ああ、自然よ
父よ
僕を一人立ちにさせた廣大な父よ
僕から目を離さないで守る事をせよ
常に父の氣魄を僕に充たせよ 
この遠い道程のため
この遠い道程のため

以上です。