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)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。
前言
眾所周知axios是vue-resource后出現(xiàn)的Vue請求數(shù)據(jù)的插件。vue更新到2.0之后,作者尤大就宣告不再對vue-resource更新,而是推薦的axios。更多的詳細介紹大家可以參考這里：http://www.dbjr.com.cn/article/109444.htm
本文主要介紹了關(guān)于vue使用axios時this的指向問題，下面話不多說了，來一起看看詳細的介紹吧。
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中延遲執(zhí)行某個函數(shù)的實現(xiàn)方式
在Vue中延遲執(zhí)行某個函數(shù),你可以使用setTimeout()函數(shù)或者Vue提供的生命周期鉤子函數(shù),本文通過一些示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
Vue項目本地沒有問題但部署到服務(wù)器上提示錯誤(問題解決方案)
一個 VUE 的項目在本地部署沒有問題，但是部署到服務(wù)器上的時候提示訪問資源的錯誤，遇到這樣的問題如何解決呢？下面小編給大家?guī)砹薞ue項目本地沒有問題但部署到服務(wù)器上提示錯誤的解決方法，感興趣的朋友一起看看吧2023-05-05
這篇文章主要介紹了vue 項目中使用websocket的實例代碼，通過實例代碼給大家介紹了在utils下新建websocket.js文件的方法,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
利用Vue3 (一）創(chuàng)建Vue CLI 項目
這篇文章主要介紹利用Vue3 創(chuàng)建Vue CLI 項目，下面文章內(nèi)容附有官方文檔鏈接，安裝過程，需要的可以參考一下2021-10-10
Vue3 在經(jīng)過多個開發(fā)版本的迭代后,終于迎來了它的正式版本,下面這篇文章主要給大家介紹了關(guān)于如何使用vue3實現(xiàn)一個人喵交流小程序的相關(guān)資料,需要的朋友可以參考下2021-11-11
今天小編就為大家分享一篇vue利用v-for嵌套輸出多層對象,分別輸出到個表的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇解決vue 表格table列求和的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了詳解處理Vue單頁面應(yīng)用SEO的另一種思路，本文主要針對 vue 2.0 單頁面 Meta SEO 優(yōu)化展開介紹，非常具有實用價值，需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細介紹了Vue+axios封裝請求實現(xiàn)前后端分離，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
Vue3+cesium環(huán)境搭建的實現(xiàn)示例
本文主要介紹了Vue3+cesium環(huán)境搭建的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08