215
124

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-04-10

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) も捨てれる世界になりつつありますね。

215
124
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
215
124

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?