快捷導(dǎo)航

vue使用axios時(shí)關(guān)于this的指向問題詳解

更新時(shí)間：2017年12月22日 09:06:23 作者：song

最近在學(xué)習(xí)使用vue+axios，在使用中發(fā)現(xiàn)了一個(gè)問題，下面總結(jié)分享給大家，這篇文章主要給大家介紹了關(guān)于vue使用axios時(shí)this的指向問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。

前言

眾所周知axios是vue-resource后出現(xiàn)的Vue請求數(shù)據(jù)的插件。vue更新到2.0之后,作者尤大就宣告不再對vue-resource更新,而是推薦的axios。更多的詳細(xì)介紹大家可以參考這里：http://chabaoo.cn/article/109444.htm

本文主要介紹了關(guān)于vue使用axios時(shí)this的指向問題，下面話不多說了，來一起看看詳細(xì)的介紹吧。

1.解決辦法

在vue中使用axios做網(wǎng)絡(luò)請求的時(shí)候，會(huì)遇到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í)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

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