vue使用axios時關于this的指向問題詳解

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

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

前言

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

本文主要介紹了關于vue使用axios時this的指向問題，下面話不多說了，來一起看看詳細的介紹吧。

1.解決辦法

在vue中使用axios做網絡請求的時候，會遇到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ù) "=>" 內部的this是詞法作用域，由上下文確定（也就是由外層調用者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
 })
 });
 }

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

vue router使用query和params傳參的使用和區(qū)別
本篇文章主要介紹了vue router使用query和params傳參的使用和區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
使用vue.js制作分頁組件
本文給大家分享的是個人在使用vue.js制作的文章和評論的分頁組件，并使用webpack打包起來，這里推薦給大家，有需要的小伙伴可以參考下
2016-06-06
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們日常開發(fā)中，表格業(yè)務基本是必不可少的，對于老手來說確實簡單，家常便飯罷了，但是對于新手小白如何最快上手搞定需求呢？本文從思路開始著手，幫你快速搞定表格
2022-11-11
vue使用路由router-view的詳細代碼
這篇文章主要介紹了vue使用路由router-view的相關知識,其原理就是采用?SPA(single-page-application)?模式,就是只有一個?Web?頁面的應用,通過?router?來控制頁面的刷新和迭代,感興趣的朋友一起看看吧
2023-12-12
Vue如何調用接口請求頭增加參數(shù)
這篇文章主要介紹了Vue如何調用接口請求頭增加參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
element-ui table span-method(行合并)的實現(xiàn)代碼
element-ui官網中關于行合并的例子是根據(jù)行號進行合并的，這顯然不符合我們日常開發(fā)需求，因為通常我們table中的數(shù)據(jù)都是動態(tài)生成的，非常具有實用價值，需要的朋友可以參考下
2018-12-12
ElementUI多個子組件表單的校驗管理實現(xiàn)
這篇文章主要介紹了ElementUI多個子組件表單實現(xiàn)方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
vue中form表單禁用專用組件介紹
這篇文章主要介紹了vue中form表單禁用專用組件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
vue滑動解鎖組件使用方法詳解
這篇文章主要為大家詳細介紹了vue滑動解鎖組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue實現(xiàn)select下拉顯示隱藏功能
這篇文章主要介紹了vue實現(xiàn)select下拉顯示隱藏功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09