綺麗に死ぬITエンジニア

IE11でAjaxを利用する際にキャッシュされないようにする方法

2017-12-14

Internet Explorer(IE)は何かと他のモダンブラウザと違う挙動が多く、苦労させられることが多いです。特に近年SPAの需要が高まってきており、IEには困らされてばかりです。

今回は、そんなIEの11で、JavaScriptのHTTPクライアントライブラリからAPIを叩こうとした際に、頑固なキャッシュが機能してしまう問題を回避する方法を記述します。

jQueryの場合

jQueryajax()等のAjax系メソッドを利用している場合は簡単です。次のスクリプトを最初に一度実行するように、追加しましょう。

$.ajaxSetup({
  cache: false
});

もしくは、以下のようにリクエスト毎に都度キャッシュを無効にすることも可能です。

$.ajax({
  url: 'http://example.com',
  cache: false,
  // ...
});

jQuery以外のライブラリを利用している場合

問題はjQuery以外のライブラリの場合です。大抵のライブラリには、jQueryのようにcache: falseのような機能は標準機能としては付いていません。

当のjQueryはcache: falseが指定された場合にどういった動作をしてるかというと、APIのURLにパラメーター?_=[タイムスタンプ]を追加しています。

これを、自動もしくは手動で付与するようにしてやれば問題は解決です。

メジャーなaxiosとSuperAgentの2つのライブラリにおける例を提示します。それ以外のライブラリについても、同様の実装をすればキャッシュされなくなりますので、参考になさってください。

axiosの場合

axiosには、Interceptorsという機能があり、HTTPリクエストに共通の処理を挟むことができます。次のようにすることで、以降のaxiosからのリクエストは全てキャッシュされなくなります。

axios.interceptors.request.use(function (config) {
  if (typeof config.params === 'undefined') {
    config.params = {};
  }
  if (typeof config.params === 'object') {
    if (typeof URLSearchParams === 'function' && config.params instanceof URLSearchParams)
      config.params.append('_', Date.now());
    else
      config.params._ = Date.now();
  }

  return config;
});

もしくは、以下のようにリクエスト毎に手動でパラメーターにタイムスタンプを追加してやってもいいでしょう。

axios.get('/user?ID=12345&_=' + Date.now());

axios.get('/user', {
  params: {
    ID: 12345
    _: Date.now()
  }
});

SuperAgentの場合

SuperAgentでは、キャッシュしないようにするためのプラグイン「superagent-no-cache」が存在するので、それを利用します。

以下のようにインストールし、利用することができます。

npm install --save superagent-no-cache
var request = require('superagent')
var noCache = require('superagent-no-cache')
  
request.get('/url')
  .use(noCache)
  .end(function _requestCallback() {
    // do something
  });