Vue解惑 axios中this的指向問題

2021-10-09 08:58:05 字數 865 閱讀 7416

axios 是乙個基於 promise 的 http 庫,可以用在瀏覽器和 node.js 中。在進行vue實驗時,需要用到axios進行介面請求,並將返回的內容傳遞到vue的data選項中。正常情況下,會使用this.list = response.data的格式進行賦值,但this的指向恰恰是最容易被忽略的地方。

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

通過在網路上搜尋,有很多人說,this指向為undefined。但在我進行實驗時,axios中的this指向window物件。

具體是怎樣的?讓我們來試驗一下。

加入下面這樣一行**來驗證一下:

window.list =

"this is windows list"

;

來看一下輸出結果:

為了對比驗證,我們將上一條**注釋掉。

= "this is windows list";
再來看一下控制台輸出的結果:

通過對比實驗,我們可以確定,在axios中,this指向了window物件。(不同的實驗環境可能會有差異,this也可能指向undefined或axios)。

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

二、使用that傳遞this變數

三、使用es6中的箭頭函式

使用箭頭函式替代普通函式,es6中的箭頭函式 「=>」 內部的 this 屬於詞法作用域,由上下文確定(也就是由外層呼叫者vue來確定)。

vue中axios的封裝

cnpm install axios s 第二步建立乙個htttp.js response 從哪個頁面跳轉 return response error 封裝get方法 param url param data returns export function fetch url,params then...

vue中axios的封裝

先安裝 axios npm install axiosaxios的詳細介紹以及用法 就不多說了請 移步 github 下面是簡單的封裝乙個 http.js,在此說明 checkstatus 這個方法呢 是不一定需要的 根據個人的專案需求吧,也可以直接返回response,交給後面另行處理也行。或者根...

Vue中axios的封裝

npm install axios 命令列安裝axios 首先,新建乙個js檔案用於引入axios。比如說,新建乙個http.js檔案,在檔案中引入步驟如下所示 import qs from qs 引入qs模組,為post型資料提供序列化 非常重要 import from vant 設定請求超時 a...