メモブログ

技術的なことを書き連ねるブログ

IE11 で 非同期のHTTP通信がうまくいかない

こんな風に、 jsでfetchを使ってサーバーからのresponseの情報(今回の場合は時間)を取得したい時ありますよね。

  fetch(location.href)
    .then((response) => {
      if (response.ok) {
        console.log(response.headers.get('Date'))
        return
      }
      throw new Error('request failed')
    })
    .catch((err) => {
      console.log(err)
    })

ところが、IE11だけ、この

response.headers.get('Date')

がnullになってしまいました。

どうやら、IE11は、HTTP通信をキャッシュしてしまうらしく、 それで新たに「headers.get('Date')」が取得出来ないようです。 medium.com

  fetch(location.href,
    headers: { Pragma: 'no-cache' },
   )
    .then((response) => {
      if (response.ok) {
        console.log(response.headers.get('Date'))
        return
      }
      throw new Error('request failed')
    })
    .catch((err) => {
      console.log(err)
    })

fetchのオプションの所に、キャッシュさせない記述を することで無事データが取得できました。

スライダープラグインSwiperがIE11で動かない時の設定

今までは、スライダーのプラグインに 「slick」を使わせてもらっていたのですが、

github.com

最近あまり更新されていないので 「Swiper」というプラグインに乗り換えました。

github.com

機能も沢山あるので、これがあればほぼ困ることはないと思います。

ですが、1点問題があって「ES module」で読み込むとIE11でエラーが出てしまい動きません。

import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

理由は、このページの下の方に書いてあります。

idangero.us

In case you use it as an ES module make sure:

you have enabled Babel or Buble to transpile it to ES5 syntax, you have enabled node modules resolving and babel transpiling for Swiper as it uses Dom7 and ssr-window packages as dependencies.

  • babel or buble? で ES5にトランスパイルします。
  • Swiperは依存関係としてDom7およびssr-windowパッケージを使用するため、node_modulesの解決と、 babelでのトランスパイルを有効にします。

なので、通常であれば、babelでのトランスパイルにおいて、
「node_modules」ディレクトリは除外しますが、
「dom7|ssr-window|swiper」の3つのモジュールはトランスパイルしてね。
とwebpack.configに追記してあげてください。

  module: {
    rules: [
      {
        test: /\.js$/,
        // ここの設定を変更する
        exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/, 
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'entry',
                    corejs: 3
                  }
                ]
              ]
            }
          }
        ]
      },