亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

創建項目配置選項

1. 創建vue項目：vue create axios-vue(項目名)

2. 上下切換條目，空格選擇

3. 
   

1. 查詢vue-cli版本：命令vue-V
   

2. 安裝vue-cli腳手架：npm install -g @vue/cli

3. 
   

實例的相關配置

axios全局配置：axios.defaults.timeout=1000

axios.defaults.baseURL=''

axios實例配置

let instance = axios.create()

instance.defaults.timeout=3000

axios? ?請求配置 優先級最高

instance.get('/data.json',{timeout:5000})

并發請求：同時進行多個請求，并統一處理返回值

axios.all([ ])

axios.spread

delete有兩種情況：一是放在URL，二是在請求體中，需要跟后端溝通好

• form-data請求（圖片上傳，文件上傳）
  

• application/json請求

請求攔截器

axios.interceptorss.request.use
(config?=>?{
?//?do?something?before?sending?request
?return?config
},?err?=>?{
?//?在請求錯誤的時候做些什么
?return?Promise.reject(err)
})

axios三種配置的優先級：

全局配置 < 實例配置 < 請求配置

axios的幾種配置：

1. axios全局配置：通常全局配置就是baseURL和timeout兩項

2. axios實例配置

3. axios請求配置
   

params vs. data:

params, 請求參數拼接在url;?

data, 請求參數放在請求體

headers:?{
????token:?''
}

實戰（聯系人列表增刪改查功能）

一、安裝vant組件庫（https://youzan.github.io/vant/#/zh-CN/，它是移動端組件庫，我們可以在快熟上手這一欄，找到安裝的教程）

1、安裝vant組件庫

2、引入組件庫（方式一：通過插件方式自動按需要進行自動引入，例如：import {Button}?from 'vant',這種方式不需要引入樣式，方式二：手動按需要引入，此種方式需要引入樣式。方式三：導入所有組件，不推薦，導致項目壓縮包變大，請求變慢），有點類似于element-ui

3、注冊組件

取消請求

使用場景：取消正在進行的http請求（僅作了解、aioxs的這個功能）

使用方法：

聲明取消請求：CancelToken相當于對象，source（）相當于方法，這樣會生成一個Source對象，這個Source對象里有一個token，然后再發送請求時，將token傳入第二個參數里。當要取消請求時，需要編寫catch方法，正常請求成功會走then方法，取消請求時走catch方法。此時僅是聲明了取消請求的動作，但不會觸發。

觸發取消請求：通過Source對象的cancel方法。該方法有一個Message參數，而這個參數就會進入上面的catch（）的err參數中。注意這個Message參數是可選的。如果不寫則直接取消請求。

攔截器

請求攔截器使用場景：在請求被處理前攔截，做一些操作（例如：登錄狀態，通常登錄成功后，后端會返回一個token，這個token會存儲一些信息，這樣前端每次發請求時帶token才可以訪問一些資源）。

請求攔截器使用方法（use方法有兩個參數，第一個是請求前的回調函數，請求配置，也就是在發送請求前做一些操作。第二個是請求錯誤的回調函數）

拓展：promise有兩個函數一個是reslove函數，一般成功時用，reject一般失敗錯誤時用。

使用場景：在響應被處理前攔截，做一些操作。

響應攔截器使用方法：（use方法有兩個參數，第一個是請求前的回調函數，請求配置，也就是在發送請求前做一些操作。第二個是請求錯誤的回調函數）

拓展：axios.get().then(res=>{})中的then相當于發送請求成功后的回調函數，而axios.get().catch(err=>{})相當于請求成功，對響應失敗的處理，也就是reject的err會觸發catch方法。

請求錯誤和響應錯誤區別：請求錯誤表示請求沒有到達后端，瀏覽器會報一些錯誤，比如請求接口沒有，就會報404。例如：從數據庫查詢某一條記錄，但是沒有，后臺返回一個狀態碼和錯誤信息，此時就是響應錯誤（請求到達后端，返回錯誤稱為響應錯誤。沒到達后端，成為請求錯誤）。

取消攔截器使用方法

使用場景：對攔截器進行取消。

拓展：一般使用攔截器時，都是聲明一個變量，給實例添加攔截器，給實例添加屬性，一般不會給axios添加內容，避免造成全局污染。

拓展：當在請求攔截器中，對headers的屬性進行賦值時，通常使用config.headers.token='',而不是config.headers={token:‘’},因為第二種方式會把headers里的其他屬性覆蓋掉。

不同axios實例訪問不同接口，不同axios實例有不同攔截器，從而實現有需要攔截，有不需要攔截的。

請求攔截器其他使用場景：比如某一個請求，可能需要幾秒，此時我們可以通過請求攔截器添加一個頁面的等待的樣式，等數據響應回來時再取消這個樣式。