Help us understand the problem. What is going on with this article?

nuxt.js は axios を捨てて ky になる様子

More than 1 year has passed since last update.

nuxt.js は node.js でもブラウザ上でも動作することが求められるため、統一したインターフェースで HTTP リクエストを行うには、何かしらのライブラリを利用する必要があります。

これまで nuxt.js が公式でサポートし、強く推奨していたのは axios と呼ばれるライブラリです。

これは、ブラウザでは XMLHttpRequest を用い、 node.js では http モジュールを用いる基本的なユニバーサル HTTP リクエストライブラリです。

しかし、 service worker によるサポートを受けるためには fetch API を利用する必要があったり、 axios の実装自体が結構煩雑で使いづらいように見えたりと、弱点もありました。

そこで、コミュニティでは新しく @nuxt/http というモジュールを開発し始めました。

現在では WIP ですが、ほとんどの機能において十分な状態になっていると思います。

この新しいモジュールは sindresorhus/ky ライブラリをベースとしています(初めて聞いた)。

awesome-nodejs などを公開しているかなり JavaScript 界隈に強い人のプロダクトのようです。

axios と比べると、

  • 軽量
  • fetch API を利用するので service worker との親和性が向上
  • node.js 側は node-fetch を用いてほぼロジックなしで対応(強い)

と、いろいろ良い感じに見えます。

致命的な弱点として、 リクエスト Progress が取得できない です。

これは、 fetch API 自身がその機能を提供していないため、ライブラリレベルではどうしようもないですね。

もし Progress が必要な場合(ファイルのアップロードとか)は、諦めて XMLHttpRequest を利用しましょう。

[追記: 2019/05/22]

コメントで @yuta0801 さんに教えてもらいましたが、 fetch API でも ReadableStream を使って Progress を取得出来るようです。

これは ある程度最新のブラウザ では既にサポートされているので、例えば ky であれば onDownloadProgress オプションで 進捗を取得することが可能でした。

また、リクエストのキャンセルも AbortController を使えるブラウザであればキャンセル可能です。

IE さえ捨てれば XMLHttpRequest(≒axios) も捨てれる世界になりつつありますね。

il-m-yamagishi
WebGL から AWS までいじれる赤魔導士です。
https://cafe-capy.net
infiniteloop
「ソースコードでなんでも生み出す」なんでもない記号から、とんでもないモノを生み出す。日々技術を磨き続け、あらゆる難題に答えていく札幌のシステム会社です。
https://www.infiniteloop.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away