Javascriptでサーバへアクセスするのにfetchメソッドを使ってみる。

 
以前は、 XMLHttpRequest や jQuery の ajaxメソッドを使ってサーバへのアクセスをしていたけど、今はfetchメソッドを使うとシンプルにかけそうなのでなんとくなくメモ。

前は非同期処理をする際に、コールバック関数をつなげていくような見通しがわるいコード
になってたけど、イマドキはpromiseが使えるので、見た目すっきりでいい感じ。


(参考)
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch


[基本的な使い方(promise)]

fetch(接続先文字列, { オプション })
 .then((response) => {
　 //Responseオブジェクトが引数に設定される
    //httpステータス404とかでもここまで到達するのでResponse.statusかResponse.okプロパティで正常か判定をしたほうがよい。
    if (!response.ok) {
        throw new Error();
    }
    //ResponseのBody部を戻り値にしてやるBodyに設定されているデータに応じて容易に取得するためのメソッドが用意されている
　 // バイナリ:response.blob(),JSON形式: response.json() ,Text形式: response.text() ,FomrData形式: response.formData()

    return response.json(); //bodyがJSON文字列の場合の取得例
 })
 .then((data) => {
    //前のthenのリターンが引数として設定される
    //response body部の処理を記述する想定
   
    
 })
 .catch((error) => {
    // ネットワークトラブルか、then句での例外などの処理を記述
 });


<<GETの場合>>
オプションは省略可能
fetch(接続先文字列)


<<POSTの場合>>
オプション部分で、method,cache,bodyを指定する
fetch(接続先文字列, {   
    method: 'POST',
        cache: 'no-cache',
        headers: {
              'Content-Type': 'application/json',
        },
        body: data  //送りたいデータ
 }
)

bodyに設定設定するのは、テキストかformData,バイナリと何でもよい。

[json文字列の場合]
 適当なオブジェクト(data)をJSON.stringify(data)としてJSONに変換するだけでＯＫ
   body:JSON.stringify(data)

 ※オプション部分にヘッダーとして、Content-Typeなどを設定するとよい。
  headers: {
    'Content-Type': 'application/json',
  },

[formDataの場合]
ファイルアップロードとかする場合はformDataのほうがよさげ。
const data = new FormData();
let blob = new Blob(['Sample text'], {
    type: 'text/plain'
});data.append('data1', blob, 'foo.txt');