天天看點

Vue解惑——axios中this的指向問題

場景

Axios 是一個基于 promise 的 HTTP 庫,可以用在浏覽器和 node.js 中。在進行Vue實驗時,需要用到axios進行接口請求,并将傳回的内容傳遞到Vue的data選項中。

正常情況下,會使用this.list = response.data的格式進行指派,但this的指向恰恰是最容易被忽略的地方。

出現的問題:

在vue中使用​做網絡請求的時候,會遇到this不指向vue,而指向其它地方的情況。如下圖所示:

Vue解惑——axios中this的指向問題

但是,這邊的this指向的是window

解決方法

一、使用bind()改變this指向

Vue解惑——axios中this的指向問題

 二、使用that傳遞this變量

Vue解惑——axios中this的指向問題

三、使用ES6中的箭頭函數

使用箭頭函數替代普通函數,ES6中的箭頭函數 “=>” 内部的 this 屬于詞法作用域,由上下文确定(也就是由外層調用者vue來确定)

繼續閱讀