Android 4.x 系ブラウザで URLSearchParams が undefined になる

前回 axios で CORS によるクロスドメイン通信するとき という記事を書いたが、検証していたところ一部の Android ブラウザで不具合になったので追記します。

URLSearchParams とは

クエリ文字列を扱う関数(※1)でもダウンブラウザではわりと実装されているようです(※2)。

URLSearchParams が使えない端末(動作確認済)

• Android v4.0.2 (GALAXY S III SC-06D)

対処法

前回の記事のコード

import axios from "axios";
import {forEach, keys} from "lodash";

let postApi = (path, params, headers) => {
    if (!params) {
        params = {};
    }
    let _params = new URLSearchParams();
    forEach(keys(params), (val) => {
        _params.append(val, params[val]);
    });
    if (!headers) {
        headers = {};
    }
    return axios({
        method: "POST",
        url: path,
        data: _params,
        headers: headers
    });
};

変更後

qs を使うとうまく行きました(※3)。

import axios from "axios";
import qs from "qs";
import {forEach, keys} from "lodash";

let postApi = (path, params, headers) => {
    if (!params) {
        params = {};
    }
    if (!headers) {
        headers = {};
    }
    return axios({
        method: "POST",
        url: path,
        data: qs.stringify(params),
        headers: headers
    });
};

余談

polyfill 使えばいいやと思って URLSearchParams の npm インストールして使ったのですが(※4)上記の端末では動きませんでした。

references

(※1) https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams
(※2) https://caniuse.com/#search=URLSearchParams
(※3) https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
(※4) https://github.com/WebReflection/url-search-params