axiosで数値のレスポンスがおかしい時に確認したいこと

axiosでAPIを叩いている時にレスポンス内容が改変されるという現象に出会いました。

ブラウザやAPIを叩くツールで確認すると正常なレスポンスなのに、axiosだとレスポンス内容が違う・・。

意図しないレスポンスは桁数が多い数値でした。

回避方法

ぐぐってみるとそれらしきStackOverflowを発見しました。

javascript - axios - how to deal with big integers - Stack Overflow

どうやら桁数の多い数値BigIntはレスポンスが変わってしまうそうですね。

そこでレスポンスをBigIntに対応させるためのコードが下記です。

const JSONBig = require('json-bigint')

const api = axios.create({
  transformResponse: [data  => JSONBig.parse(data)]
})

json-bigintというライブラリを利用して、axiosで受け取るレスポンスをBigIntに対応させます。

リクエストごとにtransformResponseを指定してもよいかもしれませんが、共通して使えるようにしておくと便利です。

コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発