非同期で取得したデータがIE11で文字化けする場合の対処法

axiosでデータを取得後にDOM操作を行おうとしたところ、IE11のみ文字化けする事例があったのでメモ。

発生状況

• axios: v0.21.1
• IE11
• Chrome, Firefoxでは起きず

以下のようにresponseType: 'document'を指定して取得したところ、IE11のみ文字化けが発生。

axios.get( '取得したいデータのURL', { responseType: 'document' } )
  .then( res => res.data )
  .then( data => {
    console.log( data ); // IEで文字化けする
  } );

取得したいデータの文字コードがUTF-8でない可能性もあったのですが、根本の原因はわからず…。

ただresponseType: 'document'を指定しない場合文字化けは発生しないので、いったん無指定で取得した後にDocumentオブジェクトに変換すればよさそう。

何か方法はないかなーと検索したところ、DOMParserというAPIがありました。

DOMParser - Web API | MDN

DOMParser インターフェイスは、 XML や HTML ソースコードを文字列から DOM の Document に解釈する機能を提供します。

上記のコードを以下のように修正。するとIE11でも文字化けなく取得することができました。

axios.get( '取得したいデータのURL' )
  .then( res => res.data )
  .then( data => {
    const domParser = new DOMParser();
    const doc = domParser.parseFromString( data, 'text/html' );
    console.log( doc );
  }