新しいAxiosのリクエスト

Question

Axiosを使用してAPIに投稿しています。応答のデータを使用していますが、もう1つのAPIリクエストを作成したいと思いますが、axios is not definedという問題が発生しています。

this.axios({ 
    method: 'post', 
    url: '/my_api/test', 
    data: "testdata=test123", 
    headers: { 
    'Content-Type': 'application/x-www-form-urlencoded' 
    } 
}) 

.then(function (response) { 
    this.axios({ 
    method: 'get', 
    url: '/my_api/test2', 
    data: "testdata2=" + response.data.id 
    }) 
}) 

を、私は先に述べたように、私のコンソールでのエラーは以下の通りである：私のVueのログインコンポーネント内である

呼び出しは、以下の通りですTypeError: Cannot read property 'axios' of undefined。

私はthis.なしで2番目のリクエストを書きましたが、同じ問題があります。どこが間違っていますか？

Answer 1

ここでarrow functionを使用する必要があります。

通常の関数には、独自のthisという値があります。

this.axios({ 
    method: 'post', 
    url: '/my_api/test', 
    data: "testdata=test123", 
    headers: { 
    'Content-Type': 'application/x-www-form-urlencoded' 
    } 
}) 

.then(response => { 
    this.axios({ 
    method: 'get', 
    url: '/my_api/test2', 
    data: "testdata2=" + response.data.id 
    }) 
}) 

それとも、昔ながらの方法を好む場合は、コールバックにそれへのアクセス権を持っているいくつかの変数へthisの参照を保存することができます：

const self = this 

this.axios({ 
    method: 'post', 
    url: '/my_api/test', 
    data: "testdata=test123", 
    headers: { 
    'Content-Type': 'application/x-www-form-urlencoded' 
    } 
}) 

.then(function (response) { 
    self.axios({ 
    method: 'get', 
    url: '/my_api/test2', 
    data: "testdata2=" + response.data.id 
    }) 
})