ie9 formdata axios

axios-wrap.js

if (isIE9()) {
  // https://github.com/mzabriskie/axios/blob/master/lib/core/Axios.js
  const keys = ['post', 'patch', 'put'];
  const origPostFetcher = fetcher.post.bind(fetcher);
  ['post', 'patch', 'put'].forEach((key) => {
    fetcher[key] = function(url, data, config) {
      if (data && data.toPlainObject) {
        data = data.toPlainObject();
      }
      if (key !== 'post') {
        data = data || {};
        data._method = key;
      }
      return origPostFetcher(url, data, config);
    };
  });
  // axiosのdeleteはdataうけつけないぽいので、インターフェイス合わせる
  fetcher.delete = function(url, config) {
    data = { _method: 'delete' };
    return origPostFetcher(url, data, config);
  };
}

init.js

// polyfillとしてFormDataを用意するのはもしかしたら少し危険かもしれない
// 例えば下らへんで、FormDataだったら・・・的な処理がある (これはaxios-wrap.jsで漏れ出さないようにしているので大丈夫だが)
// https://github.com/mzabriskie/axios/blob/417913bf8b0b8c3530e3df122b4581cd83f0feb5/lib/adapters/xhr.js#L16-L18
// https://github.com/mzabriskie/axios/blob/417913bf8b0b8c3530e3df122b4581cd83f0feb5/lib/utils.js#L37-L39
window.FormData = class FakeFormData {
  constructor() {
    this.data = Object.create(null);
  }
  append(k, v) {
    this.data[k] = v;
  }
  toPlainObject() {
    return this.data; // cloneしたほうがいいかも
    // TODO data.append('images[]', image) こういうの対応しないといけないw
    // Object.keys(data).map((key) => `${key}=${data[key]}`).join('&')
    // とかで、dataをループでまわしてk1=v1&k2=v2みたいにくっつけて、
    // その結果をquerystring.parseするとかかな
  }
};