IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

JavaScript の fetch メソッドを使ってみる

はじめに

ここでは、以下の動画を参考ににして JavaScript の fetch メソッドを使ってみることにする。

 

説明

f:id:matt-note:20190316235455p:plain

 

使ってみる

ディレクトリとファイルをざっくりと作成する。

  • mkdir fetch_sample
  • cd fetch_sample
  • touch fetch.html
  • touch sample.txt
  • echo "hoge hoge" >> sample.txt

 

fetch メソッドで、sample.txt を取得してみる。ここでは、fetch メソッドの戻り値をコンソールに出力してみる。ボタン要素をクリックすると getText を実行できる。

f:id:matt-note:20190316000355p:plain

f:id:matt-note:20190316000057p:plain

-> fetch メソッドの戻り値は Promise オブジェクトになることがわかった。

 

 then メソッド内の response を出力してみる。

f:id:matt-note:20190316001049p:plain

f:id:matt-note:20190316001222p:plain

-> sample.txt にアクセスできたので、Response オブジェクトを出力できた。

 

Response オブジェクトの説明は以下の通り。fetch メソッドの実行結果として Response オブジェクトが渡されるとのこと。

f:id:matt-note:20190317220324p:plain

 

 

then メソッドをチェーンしてみる。ここでは無理矢理 "hoge" を return して、次の then で data 受け取って、data を出力してみる。

f:id:matt-note:20190316001901p:plain

f:id:matt-note:20190316001958p:plain

-> チェーンした then メソッドから hoge と出力することができた。

 

 sample.txt の値を出力してみる。response オブジェクトの text メソッドを実行する。チェーンした then メソッドでは data を受け取って、data を出力する。

f:id:matt-note:20190316002217p:plain

f:id:matt-note:20190316002242p:plain

-> sample.txt の内容を出力することができた。

 

text() メソッドの説明は以下の通り。

f:id:matt-note:20190316235642p:plain

 

sample.txt の内容を DOM に描画してみる。

f:id:matt-note:20190316003654p:plain

f:id:matt-note:20190316003733p:plain

-> テキストファイルの内容を fetch して、DOM に描画することができた。

 

なお、ブラウザの対応は以下の通り。ほとんどのブラウザで fetch メソッドを実行できる。

f:id:matt-note:20190316235835p:plain