※この記事はReact Native v0.51での出来事を記載しています。

HTTPリクエストにfetch APIを使っていたが、突然動かなくなる

HTTPリクエストをするにあたり、axiosではなく、fetch APIを試したく、今回はfetchを使っていた。Babelに下記のような設定を入れていると、fetchが動いてくれていたので、エコだなあと思って使っていた。しかし、ある日突然fetchが動かなくなっていつもの赤いエラー画面が出るようになってしまった。

{
  "presets": ["env", "react-native"]
}

「 TypeError: undefined is not an object (evaluating self.fetch) 」というエラーが出て動かなくなる。ポリフィルを入れるも、動かず

なんか無理してfetchを使っていたかなあ？と思ってみるも、思い当たるフシも特になく(もしかしたら、Node.jsのバージョンを上げたかもしれない…)。ポリフィルを当てたりしてみたが、症状は改善せず。コードの変更もなくして動かなくなったので、エラーを調べるとGitHubのIssueに同様の事象が該当した。どうやら、React Nativeのpackagerの解釈によりバグを引き起こしているらしく、今回はまさにそのバグにあたってしまった模様。つまり、今までは運良くこのバグを回避しつつ開発できていたということだろうか。

理由はよく分からないが、とりあえずポリフィル入れて動かないでIssueに上がっているようなあまり良さそうではない対処療法をするのも嫌なので、おとなしくfetchで書かれている箇所をaxiosで書き直した。

fetchは、ブラウザ向けAPIのWindowまたはWorkersから参照している。Babelを入れてトランスパイルした結果動いてしまっていたが…

たまたまこれまでfetchが動いていたということで、トランスパイラも全て再現するというものではないということだと思っておこう思う。例によって、ES2015のシンタックスが標準的に使われるようになる少し前、トランスパイラが流行りだした頃に言われていたことが今さらながら勉強になったということと勝手に思っておく。

ちなみに、axiosで書き直した後、fetch APIでエラーが出ていた頃のコードにチェックアウトして見て動作確認したところ、何事も無かったかのように動きやがりました。しかし、GitHubのIssueを読んでバグを踏む可能性あるということと、fetch APIのコードよりaxiosのほうがコード文量も少なく、axiosもそんなに悪くはないなとあらためて思えた。なので、React Native開発ではしばらくaxiosを使っていこうと思う。

蛇足だが、そもそもaxiosのリポジトリの説明に書いてあるよう、ライブラリのコンセプトが「ブラウザ・サーバ問わずどこでも動く(Promise based HTTP client for the browser and node.js)」みたいな感じなので、axios自体はJavaScript環境では信頼性できそうなライブラリと認識している。fetchについては、MDNによるとまだまだ実験段階の機能のようなので、そういった意味だとしばらくaxiosを使っていても良いのかもしれない。

mmiyauchi

プログラムを書きながらTranceを聴くのが良いですね。みなさんも聴いたほうがいいですよ、Trance。EDMよりハードトランスでしょ。