Q&A
ありがとうございます。
myFunc(this)という記法があるのですね。
初めて見たので驚きました。
動かして色々使ってみようと思います。
親切にしていただき、ありがとうございました。
前提・実現したいこと
vueで非同期通信を作成したいです
発生している問題・エラーメッセージ
async内でthisの値を参照しようとすると、
XXX of undefined
と言われてしまい、thisが見えない状況です。
どの部分が間違っているのでしょう。
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> </head> <body> <div id="app"></div> </body> <script> new Vue({ el: "#app", data: { testUrl: "../api/test", }, mounted: function () { this.myFunc(); }, methods: { myFunc: function () { console.log(this.testUrl); // ../api/test が出力される async function valueCheck() { const response = await fetch(this.testUrl) // testUrl of undefined となる } valueCheck(); }, }, }); </script> </html>
試したこと
async/awaitを使わずに、fetchをthenで繋ぐと正常動作します。
JavaScript
1fetch(this.testUrl).then(()=>{ 2 // ここでは正しくどうさする 3})
回答2件
0
ベストアンサー
どの部分が間違っているのでしょう。
functionを使っていることです。
functionが実行されるときはその関数独自のthisを持つため、外側のthisは見えなくなります。
一般的な対策はアロー関数を使うことです。アロー関数は独自のthisを持たないため外側のthisを参照できます。
javascript
1 valueCheck = async () => { 2 const response = await fetch(this.testUrl); 3 }; 4 valueCheck();
アロー関数が無かった頃は、以下のようにthisを退避するための変数を利用することもありました。
javascript
1 const self = this; 2 async function valueCheck() { 3 const response = await fetch(self.testUrl) 4 } 5 valueCheck();
投稿2021/08/25 11:51
総合スコア4524
0
これはvalueCheckがVueオブジェクトの子になっていないからです。（asyncをつけていなくても参照できないと思います）
valueCheckはmyFuncの中で定義されていますが、だからといってVueオブジェクトの子（methodなど）になったわけではありません。
こういうときに有効な手段はいくつかあります。
myFuncをアロー関数にする- 呼び出し時に
myFunc.call(this);とする
myFuncをアロー関数にする
こういう場合、アロー関数では外側のthisを取得できるので、アロー関数で定義するのが一般的だと思います。
js
1const valueCheck = async () => { 2 const response = await fetch(this.testUrl) 3 // ... 4};
呼び出し時にmyFunc.call(this);とする
アロー関数でない関数は、callメソッドでthisを書き換えることができます。
myFuncを勝手に書き換えることができない場合の対処法です。
投稿2021/08/25 11:53
編集2021/08/25 11:56
総合スコア212
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/27 05:18