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では次期バージョンから使えるようになる、みたいな情報もあったが…）
なので、
のような、polyfillを読み込むようにして、使えるようにした所、まず、edgeではそれだけで問題なくなった。
※polyfillとは…というのはこちらが詳しかった。
IE11向けには、まだ対応が必要で、まず、promiseが無いので、
こちらも同様に、
などにある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が使えるようになった。
