vueでaxiosを使用する際のthisの指し方についての詳細な説明

前書き

よく知られているようにaxiosはvue-resource以降でVueがデータをリクエストするプラグインについて発表しました。vueが更新されて2.0以降、作者の尤大がvue-resourceの更新ではなく、推奨されるaxiosを使用しています。詳細については以下のリンクを参照してください：https://ja.oldtoolbag.com/article/109444.htm

本文ではvueを使用する際のaxiosでのthisの指さす問題について紹介しました。以下の詳細な説明に移りましょう。

1.解決策

vueを使用してaxiosでネットワークリクエストを行う際、thisがvueに指さないためundefinedになることがあります。その場合、アロー関数"=>"を使用して解決できます。以下のようになります：

methods: {
 loginAction(formName) {
 this.$axios.post('http://127.0.0.1/u/subLogin', {
  username: this.username,
  password: this.password
 });
  .then(function(response){
  console.log(this); //ここではthis = undefined
  });
  .catch((error)=> {
  console.log(error); //矢印関数「=>」でthisをvueに指します
  });
 });
 }
} 

2. 理由

ES6中の 矢印関数「=>」内部のthisはリテラルスコープであり、上下文によって決定されます（つまり、外層の呼び出し者vueによって決定されます）。

3. 旁白

「=>」関数を使うことで、以前の2つの方法を辞退できます：

bind(this)を使って匿名関数のthis 指向を変更します

hack 説法 var _this= this; ：

loginAction(formName) {
 var _this= this;
 this.$axios.post("...")
 .then(function(response){
  console.log(_this); //ここでは_thisはvueを指します
 });
 });
 }

まとめ

これでこの記事のすべての内容が終わりました。本文の内容が皆様の学習や仕事に参考になることを願っています。疑問があれば、コメントを残してください。皆様の「呐喊教程」へのサポートに感謝します。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を有しておらず、人工的な編集は行われていません。著作権に関する問題があれば、メールを送信してください：notice#oldtoolbag.com（メールを送信する際には、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認が取れた場合、本サイトは即座に侵害を疑われる内容を削除します。）