vue.jsとaxiosでedge、IE11で問題が…

vue.jsとaxiosでpostするようなものを作っていた所、edge、IE11で動かず、それを解決したのでその手順をまとめた。

 

 

postのパラメーターを作るのに、axiosだと、

let params = new URLSearchParams();

params.append('postData', 'aaaaaa');

というようなURLSearchParamsを使ってpostdataを作るサンプルが多くあるが、

なんとそもそも、edge、IE11ではURLSearchParamsが使えない。

(※edgeでは次期バージョンから使えるようになる、みたいな情報もあったが…)

 

なので、

github.com

のような、polyfillを読み込むようにして、使えるようにした所、まず、edgeではそれだけで問題なくなった。

 

※polyfillとは…というのはこちらが詳しかった。

qiita.com

 

 

IE11向けには、まだ対応が必要で、まず、promiseが無いので、

こちらも同様に、

teratail.com

などにあるpolyfillを読み込むようにする。

 

その他に、以下のような形で、アローファンクションを使っていたら、やはりIE11では使えないので、

axios.post('', params).
then(res => {

})

以下のように書き換える必要がある。

axios.post('', params).
then(function(res){

})

 

※さらにその場合、thisのスコープが変わるので、thenの後のブロックでthisを使うような場合は、大元から、thisを変数に取っておいて、使うようにしないといけなくなる。

var num = 1;

var self = this;

axios.post('', params).
then(function(res){

  console.log(self.num); //これはok

  console.log(this.num); //これはスコープが既に違ってしまっているのでng

})

 

また、postの際、urlを省略すると、通常、自分が読み込まれているページにpostされるはずだが、IE11ではだめで、空のまま実行すると、object DOMExceptionが起こってしまった。

なので、普通に、自分のurlをlocation.hrefを指定することで、IE11でも問題なく動くようになった。

axios.post(location.href, params).
then(function(res){

})

 

以上で、edge、IE11でも問題なく、vue.jsとaxiosが使えるようになった。