はじめに

Cordova iOS アプリで axios を使っての API Request が Network Error となる場合の回避策。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 発生事象
    2. 回避策
    3. 本対応(と思われるもの)
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.6
BuildVersion:	19G73

$ node -v
v12.7.0

$ npm -v
6.14.5

$ cordova -v
10.0.0

$ npm ls axios
axios@0.19.2 | MIT | deps: 1 | versions: 43

$ npm ls cordova-ios
cordova-ios@6.1.0 | Apache-2.0 | deps: 10 | versions: 1141

iPhone 11 Pro (iOS 13.6)

詳細

発生事象

Cordova iOS アプリで axios を使っての API Request が Network Error となる。

挙動としてモヤモヤするが具体的には以下で、エラーになったり成功したりする、という感じ

  • Network Error になった場合、そもそもサーバに Request が届いてない
    • Preflight Request でエラー、とかそういうことでもない
  • Network Error 発生直後に、間髪入れずに同じ API Request を送信すると成功したりする

Android アプリ、PC 上のブラウザ(Chrome) から同じ API Request を送った場合は問題は起きず、iOS でのみ Network Error になる。

回避策

正直あまりよろしくない対応だと思うが、「Network Error になったら、間隔を空けて最大 n回までリトライ」で回避できた。

※以下のサンプルコードは必要最小限なので、例外処理や間隔、リトライ回数などは各自で要調整。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import axios from 'axios'

const sleep = (msec = 1000) => {
  return new Promise(resolve => setTimeout(resolve, msec));
};

const request = async (url, config) => {
  const maxRetry = 5;  // 最大5回リトライ
  for (let i = 0; i < maxRetry; i ++) {
    try {
      return await axios.request(url, config);
    } catch (error) {
      if (error.message && error.message.toLowerCase() === 'network error' && i < (maxRetry - 1)) {
        // Network Error の場合 250msec 待ってリトライ
        await this.sleep(250);
        continue;
      }
      throw error;
    }
  }
};

本対応(と思われるもの)

少し古いが Ionic でも似たような Issue が上がっており、Issue comment によると silkimen/cordova-plugin-advanced-http を使うと解決するっぽい。

ただし、自分は試してないので本当に解決するのか不明。

まとめ

その他・メモ

vue.js - Axios GET not working in Safari browser - Stack Overflow

「iOS Safari だとキャッシュの影響で失敗するので、タイムスタンプ的なクエリパラメータを追加すると良いよ」みたいな内容。試してみたけど効果なし。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list