vue使用axios時關(guān)于this的指向問題詳解
更新時間：2017年12月22日 09:06:23 作者：song
最近在學(xué)習(xí)使用vue+axios，在使用中發(fā)現(xiàn)了一個問題，下面總結(jié)分享給大家，這篇文章主要給大家介紹了關(guān)于vue使用axios時this的指向問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。
前言
眾所周知axios是vue-resource后出現(xiàn)的Vue請求數(shù)據(jù)的插件。vue更新到2.0之后,作者尤大就宣告不再對vue-resource更新,而是推薦的axios。更多的詳細(xì)介紹大家可以參考這里：http://www.fzitv.net/article/109444.htm
本文主要介紹了關(guān)于vue使用axios時this的指向問題，下面話不多說了，來一起看看詳細(xì)的介紹吧。
1.解決辦法
在vue中使用axios做網(wǎng)絡(luò)請求的時候，會遇到this不指向vue，而為undefined，可以使用箭頭函數(shù)"=>"來解決。如下：
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); //箭頭函數(shù)"=>"使this指向vue
});
});
}
}
2. 原因
ES6中的 箭頭函數(shù) "=>" 內(nèi)部的this是詞法作用域，由上下文確定（也就是由外層調(diào)用者vue來確定）。
3. 題外話
使用"=>"函數(shù)，就可以告別之前的兩種寫法了：
bind(this)來改變匿名函數(shù)的this指向
hack寫法 var _this= this; ：
loginAction(formName) {
var _this= this;
this.$axios.post("...")
.then(function(response){
console.log(_this); //這里 _this 指向vue
})
});
}
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
vue router使用query和params傳參的使用和區(qū)別
本篇文章主要介紹了vue router使用query和params傳參的使用和區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
本文給大家分享的是個人在使用vue.js制作的文章和評論的分頁組件，并使用webpack打包起來，這里推薦給大家，有需要的小伙伴可以參考下2016-06-06
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們?nèi)粘ｉ_發(fā)中，表格業(yè)務(wù)基本是必不可少的，對于老手來說確實簡單，家常便飯罷了，但是對于新手小白如何最快上手搞定需求呢？本文從思路開始著手，幫你快速搞定表格2022-11-11
這篇文章主要介紹了vue使用路由router-view的相關(guān)知識,其原理就是采用?SPA(single-page-application)?模式,就是只有一個?Web?頁面的應(yīng)用,通過?router?來控制頁面的刷新和迭代,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了Vue如何調(diào)用接口請求頭增加參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
element-ui table span-method(行合并)的實現(xiàn)代碼
element-ui官網(wǎng)中關(guān)于行合并的例子是根據(jù)行號進行合并的，這顯然不符合我們?nèi)粘ｉ_發(fā)需求，因為通常我們table中的數(shù)據(jù)都是動態(tài)生成的，非常具有實用價值，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了ElementUI多個子組件表單實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue中form表單禁用專用組件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue滑動解鎖組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue實現(xiàn)select下拉顯示隱藏功能,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09