fetchメソッドによる非同期通信の仕方

前回、非同期通信の学習で使用したのが、「XMLHttpRequest」でしたが、最近のJavaScriptでは、あまり使用されなくなってきています。

その代わりに登場したのが、今回ご紹介する「fetch()」メソッドを使用する方法です。

「XMLHttpRequest」があるのに、「fetch」を使うということは、当然使用するメリットがあるためで、とても簡単に言うと、コードが短くシンプルに記述することが出来る点です。

それ以外にもメリットはありますが、とりあえず最初の内は気にしなくても大丈です。

それでは早速、基本的な使い方について見ていきましょう。

fetch()
1. 構文
Promise
1. async / await
2. options
FormData
あとがき

fetch()

構文

fetch(‘url’, [options]);

Promise

fetchメソッドの特徴としては、Promiseオブジェクトをレスポンスとして返す点にあります。

Promiseオブジェクトについてはすでに学習しましたが、すっかり忘れてしまっていると思いますので、以下の記事をもう一度読み直してください。

JS 非同期処理が初心者でも簡単に理解できる Promiseとasync

今回は「非同期処理」について見ていきましょう。JavaScriptの概念の中でも非常に重要な位置づけとなるものの一つです。JavaScriptを初めて学習する時につまづきやすいポイントは幾つもあるのですが、...

fetch('https://hitoridemanabou.net/sampledata.txt')
.then(response =>{
     return response.text();
    })
.then(text =>{
    console.log(text);
})
.catch(error =>{
    console.log('miss');
});


Promise {<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: 

Hello World!!
This is sample.

「then」で成功した場合、「catch」で失敗した場合の処理を記述します。

「sampledata.txt」は前回アップロードしたファイルになります。

urlが長い時は、urlに変数を指定して記述すると分かりやすくなります。

ここでは、データの受取を「text」にしていますが、その他の形式で受け取ることも出来ます。

response.json()：jsonオブジェクトとして
response.blob()：バイナリーデータとして
response.formData()：FromDataオブジェクトとして
response.arrayBuffer()：純粋なバイナリーデータとして

単純にリクエストが成功したかどうか確認するには以下を記述します。

response.ok：ステータスコードが「200〜299」の場合は「true」。
response.status：HTTPコード

async / await

let url = 'https://hitoridemanabou.net/sampledata.txt';
let response = await fetch(url);
let data = await response.text();
console.log(data);

Hello World!!
This is sample.

「await」を使って記述すると、より可読性が上がります。

コードによっては「async」も記述します。

options

「options」を設定すると、より細かいリクエストを行うことが出来ます。

method：HTTPメソッド
headers：オブジェクト（リクエストヘッダーを持つ）
body：サブミットするデータ

FormData

FormDataを使うと、フォームの内容を簡単に収集することが出来ます。

    <p>データの取得</p>
    <form action="#" id="data">
      <div class="form">
        <label for="name"
          >名前 :
          <input type="text" name="name" id="name" />
        </label>
      </div>
      <div class="form">
        <label for="mail"
          >メールアドレス :
          <input type="text" name="mail" id="mail" />
        </label>
      </div>
      <input type="submit" value="送信" />
    </form>

let sub = document.getElementById('data');
sub.addEventListener('submit', function () {
  let fd = new FormData(data);
  for (i of fd) {
    console.log(`${i[0]}: ${i[1]}`);
  }
});

データの取得

こちらのボックスに名前とメールアドレスを入力すると、コンソールに入力した内容が表示されます。

setメソッドやappendメソッドを使うと、新しいキーと値をセットすることが出来ます。

let fromData = new FormData();

fromData.set('name', 'Sato');
fromData.set('mail', 'sample@gmai.com');
for(let i of fromData){
    console.log(`${i[0]} : ${i[1]}`);
}
 name : Sato
 mail : sample@gmai.com

setメソッドとappendメソッドの違いは、値を上書きするかどうかの違いです。

let fromData = new FormData();

fromData.set('name', 'Sato');
fromData.set('mail', 'sample@gmai.com');
fromData.set('name', 'Yamada');
fromData.append('mail', 'test@gmail.com');
for(let i of fromData){
    console.log(`${i[0]} : ${i[1]}`);
}


 name : Yamada
 mail : sample@gmai.com
 mail : test@gmail.com

setメソッドで新たに名前を追加すると上書きされていますが、appendメソッドでメールアドレスを追加すると、新たに追加されています。

その他にも以下のメソッドがあります。