ブログをHatena Blog → note に変更します!
Hatena Blogも好きなんだけど、noteに変更します。
今までありがとうございました!
これからもよろしくお願いします〜。
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」を使わせてもらっていたのですが、
最近あまり更新されていないので 「Swiper」というプラグインに乗り換えました。
機能も沢山あるので、これがあればほぼ困ることはないと思います。
ですが、1点問題があって「ES module」で読み込むとIE11でエラーが出てしまい動きません。
import Swiper from 'swiper'; var mySwiper = new Swiper('.swiper-container', { /* ... */ });
理由は、このページの下の方に書いてあります。
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 } ] ] } } ] },