Axios的那些事

axios是乙個基於promise的http庫（類似於jquery的ajax，用於http請求）

可以用於瀏覽器和node.js (可用於客戶端或node編寫的服務端)

支援promise api 攔截請求和響應（請求前和響應前做一些操作，比如在請求前的請求頭中加一些授權資訊等）轉換請求資料和相應資料（比如請求時一些敏感資訊需要加密，回來進行解密）取消請求自動轉換json資料（一般進行http請求時伺服器傳輸的是字串，進行自動轉換，不用手動操作）

客戶端支援防禦xsrf攻擊

常見瀏覽器支援，ie支援8以上

a. 安裝axios: yarn add axios 或者 npm install axios

檢視package.json中的dependencies是否安裝成功 (在vue框架操作)

b. 在home.vue中引入：import axios from 『axios』

c. 在生命週期中執行乙個請求

created()})
.then
((res)
=>
)<
!-- 另一種寫法 --
>
axios(}
).then
(res=>
)

<
!-- post  --
>
<
!-- post 第一種寫法 --
>
let data =
axios.
post
('/位址'
,data)
.then
(res=>
)<
!-- post 另一種寫法 --
>
axios()
.then
(res=>
)

<
!-- post  --
>
//form-data 表單提交（上傳，檔案上傳）    （不常用）
let data =
let formdata =
newformdata()
for(
let key in data)
axios.
post
('/位址'
,formdata)
.then
(res=>
)

axios.

put(

'/位址'

,data)

.then

(res=>

)

axios.

patch

('/位址'

,data)

.then

(res=>

)

//delete 請求 (具體怎麼寫，需要跟後台進行溝通)
<
!-- one--
>
//引數會在url上拼接，query string parameters
axios.
delete
('/delete',}
).then
(res=>
)<
!-- two --
>
//引數不會在url上拼接，引數在request payload
axios.
delete
('/delete',}
).then
(res=>
)

d.請求方式具體是由後端定義，可協商希望用哪種

get:獲取資料 post:新建，提交資料（表單提交+檔案上傳：、json檔案、excel） put:更新資料（所有資料推送到後端，後端將資料更新到資料庫中） patch:更新資料（只將修改的資料推送到後端）

delete:刪除資料

e.併發請求：同時進行多個請求，並統一處理返回值

例：聊天系統需要同時展示個人資訊和好友列表，而這是通過兩個介面來請求的，需要同時處理兩個介面的資料

created()
))}

a.例項

//當後端介面位址有多個，並且超時時長不一樣，很繁瑣

在例項中配置這兩種引數，用例項去請求，方便

created()
)let axios2 = axios.
create()
instance.
get(
'/位址').
then
(res=>
)            axios2.
get(
'/位址',)
.then
(res=>
)//不建立例項，直接axios.get也行，但是要確定在整個專案裡面用的是一種後端網域名稱，
//如果是用了兩個後端網域名稱，或者是不同介面需要的超時時長不一樣，此時就需要建立乙個例項了
}

超時時長：發起http請求時，如果服務端長時間沒有返回資料，介面會報超時401 一般具體的超時時長由後端進行定義，請求了乙個特別大的資料後端進行處理，一旦處理時間過長，比如超過1秒，後端會返回401，告訴你超時了，前端也需要做一些處理

超時處理的原因：請求時間過長，會阻塞後端的內容，給伺服器造成很大的壓力，所以要及時釋放不需要的，超時了就不需要了，請求就取消了

b.配置引數都有哪些？

axios.create(,      //請求頭
params:{},   //請求引數拼接在url上
data:{},      //請求引數拼放在請求體
})

axios全域性配置
(優先順序：低)
(用的少，侷限性較大)
axios例項配置  （中）
let instance = axios.
create()
instance.defaults.timeout =
3000
axios請求配置   （高）  （用的多）
instance.
get(
'/某乙個位址'，
)

c.***status code:304 (正常是第一次返回的介面是200，第二次訪問這個介面的時候資料沒有變化，瀏覽器會自動識別返回狀態304，沒有更改，重定向，這樣資源載入會更快)

查閱…理解…歸納…持續更新…

Axios的那些事

axios 和 cookie 的那些事

remap的那些事

AfxWinMain的那些事

Axios的那些事

axios 和 cookie 的那些事

remap的那些事

AfxWinMain的那些事

相關推薦