日報(2023-04-08) axios を fetch で書き直す

ある日の出来事

直す必要があって昔書いたコードを見てて

axios
  .post(url, params)
  .then(response => {
    this.response = response;
    console.log(response);
    if (response.data.update == "ok") {
      this.acceptOKresponse = true;
    }
  })

axios 使っててあちゃーって思う事があります

あちゃー、なんて大げさにいうほどの事でもないのでしょうが、貧乏症でネットワーク帯域がもったいない、貧乏でサーバーが貧弱などの理由で firebase や vuetify みたいなデカブツを bundle から追い出して CDN から使ってもらうようにしてると、axios 程度のサイズでも気になってきます

しかるに bundle size を小さくする事は Web アプリの高速化の基本であることを鑑みるに 餅は貧乏人に焼かせろ、Web アプリは貧乏人に書かせろ と言っても過言ではないと言えるかもしれません

というわけで、標準APIなので bundle も CDN も必要ない Fetch (opens new window) で書き直すことにします

fetch

promise chain (opens new window) で書いてたのもついでに await (opens new window) にしてこんな感じ

  const res = await fetch(url, {
    method: 'POST',
    body: params,
  })
  if (res.status == 200) {
    this.acceptOKresponse = true;
  }

引数

fetch の第一引数は request object (opens new window) を渡してキャッシュモードや認証なんかを指定したり、そもそも fetch なんかつかわないで request object のメソッドで json() とか text() とかもできるそうなのですが、私は未熟にもそういうのが必要になる経験をしたことがないのでいつも url文字列 をそのまま渡してます

GET の時は第二引数を省略してしまって指定したことがない未熟物の私ですが、POST の時は POST method であることを示す method: 'POST' と、post の body を要素にしたオブジェクトをいつも渡してます

POST で JSON を送る時はこんな感じで

const res = await fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({"number": 1})
})

application/json の Content-Type ヘッダもつけてます

レスポンス

リクエストの結果はレスポンスの status プロパティを見て res.status == 200 ってしてたり ok プロパティを見てすましてたり、自分のコードなのに気分で揺らぎがあって笑いました

なんて呼ぶのか正確な名前をよく知らないのですが、レスポンスとしてサーバから返してもらうデータそのものは、axios だとデフォルトで json で帰ってくるのですが responseType (opens new window) を指定して text とか stream とか (opens new window)で帰してもらうこともできました

fetch だと、前述の request object から　json() とかで axios と同じように使うこともできるみたいなのですが、普通に fetch API で呼んだときのレスポンスは中身が何であるかによって、例えば ArrayBuffer なのか Blog なのか、ただの文字列なのか、それとも JSON 文字列なのかによって受け取り方が違っていて、それぞれ受け取るためのメソッド (opens new window)があって、それを呼び出して Promise を受け取ります
私の場合、よく JSON で受け取るのですがこんな感じです

if (res.status == 200) {
  var data = await res.json();
  this.data = data
}

結論

自分の github ググってみたら axios 使ってるのが結構あって…

---