vue的axios的使用

1.axios的基本使用

首先我們下載axios: npm install axios --save
然後我們要引用他: import axios from ‘axios’
接下來是一些基本使用:
在這裏插入圖片描述
首先我們要知道axios是幹什麼用的,她是我們在vue裏面用來進行發送網絡請求的,所以第一步我們需要把我們的路徑給獲取到,然後你可以設置你是要使用get還是post,然後因爲axios裏面封裝了promise,所以我們可以輸出我們的數據。

2.axios發送併發請求

在這裏插入圖片描述
上面的操作就是當你有兩個請求需要發送,我們就可以是使用我們的axios.all()。然後這個括號裏面寫的是我們需要發送的請求,你需要發送幾個就可以寫幾個。

3.創建對應的axios的實例

在這裏插入圖片描述
這裏的話就是難免我們會有多個服務器,當有多個服務器的時候,我們就可以這樣子寫,給他創建多個實例,對應多個服務器。

4.封裝request

當我們按照上面的操作來寫axios,可能在每個組件裏面我們都需要引入我們的axios,然後再寫我們需要進行的網絡請求。這樣子的話,萬一我們以後要進行修改,就要到每一個組件去進行修改,這是非常麻煩的,所以我們要對我們的axios進行封裝。
在這裏插入圖片描述
首先,我們可以新建一個netwok文件夾,然後新建一個request.js文件,然後在裏面寫好我們的網絡請求,然後再組件裏面進行導入就可以了。
在這裏插入圖片描述
在這裏插入圖片描述

5.axios的攔截器

在這裏插入圖片描述
當我們在進行一些操作的時候,比如說請求後,我們要進行一些其他的操作,我們就需要一些攔截,這時候就可以使用我們的攔截器。然後的話具體操作請看上圖。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章