什么是 Axios?
Axios 是一個基于 promise 的 HTTP 庫, 可以用在瀏覽器和 Node.js 中
Axios的作用是什么呢: Axios主要是用于向后臺發起網絡請求的, 并且可以在請求中做更多的可控操作
簡單來說: Axios就是一種前端向后端發送網絡請求的工具
網絡模塊的選擇
傳統的 Ajax
- 傳統的 Ajax 基于 XMLHttpRequest(XHR)
- 之所以不用它, 是因為它配置和調用方式等非?；靵y, 編碼起來看起來令人十分頭疼
- 真實開發中很少直接使用傳統的 Ajax, 而是使用 jQuery版的Ajax
jQuery-Ajax
- jQuery-Ajax 相對于傳統的 Ajax 非常好用
- 之所以不用它, 是因為 jQuery 是一個重量級的框架, 代碼有 1w+ 行, 而 Vue 的代碼也是 1w+ 行, 所以沒必要為了網絡請求, 特意引用一個 jQuery
Vue-Resource
- 官方在 Vue1.x 的時候, 推出了 Vue-Resource
Vue-Resource 的體積相對于 jQuery 小很多 - 之所以不用它, 是因為在 Vue2.0 推出后, Vue 的作者就在 GitHub 的 Issues 中說明了去掉 Vue-Resource, 并且以后也不會再更新, 意味著以后 Vue-Reource 不再支持新的 Vue 版本, 也不會再繼續更新和維護, 對以后的項目開發和維護都存在很大的隱患
Axios
在說明不再繼續更新和維護 Vue-Resource 的同時, 作者(尤雨溪) 還推薦了一個框架: Axios
Axios有非常多的優點, 并且用起來也非常方便
Axios 使用
安裝
npm install axios --save
Axios 雖然是一個插件, 但是我們不需要通過 Vue.use(axios) 來使用, 下載完成后, 只需在項目中引入即可, 至于為什么, 我認為應該是因為開發者在封裝 Axios 時, 沒有寫 install 這一步
Axios 的特性
- 在瀏覽器中發送 XMLHttpRequests 請求
- 在 Node.js 中發送 HTTP 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求和響應數據
Axios 請求方式
axios(config)axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])
發送 get 請求
發送并發請求
使用 axios.all, 可以放入多個請求的數組
axios.all([]) 返回的結果是一個數組, 使用 axios.spread 可將數組 [res1,res2] 展開為 res1, res2
axios.all([
axios.get('http://123.207.32.32:8000/home/multidata'),
axios.get('http://123.207.32.32:8000/home/data', {
params: {
type: 'sell',
page: 1
}
})
]).then(axios.spread((res1, res2) => {
console.log(res1) // 第一個請求的數據
console.log(res2) // 第二個請求的數據
}))
全局配置
在開發中, 可能很多參數都是固定的, 例如請求的 URL 前面某些部分總是一致的, 只是后面的參數或是 query 不同
這個時候, 我們可以進行一些抽取, 也可以利用 Axios 的全局配置
例如:
http://123.207.32.32:8000/home/multidatahttp://123.207.32.32:8000/home/data?type=sell&page=1
我們發現前面的http://123.207.32.32:8000總是一樣的, 那么就可以進行全局配置
注: /home并不是完全一致, /home只是在某個頁面的數據, 并不能代表全部, 有可能做某個頁面的時候就不再是/home, 而是/category
配置請求頭 Content-Type
Axios 使用 post 發送數據時, 默認是直接把 json 放到請求體中提交到后端的
也就是說, 我們的 Content-Type 變成了 application/json;charset=utf-8, 這是 Axios 默認的請求頭content-type類型
但是實際我們后端要求的 'Content-Type': 'application/x-www-form-urlencoded' 為多見, 這就與我們不符合
所以很多小伙伴在這里犯錯誤, 導致請求數據獲取不到, 明明自己的請求地址和參數都對了卻得不到數據
我們現在來說說 post 請求常見的數據格式(content-type)
-
Content-Type: application/json
- 請求體中的數據會以json字符串的形式發送到后端
-
Content-Type: application/x-www-form-urlencoded
- 請求體中的數據會以普通表單形式(鍵值對)發送到后端
-
Content-Type: multipart/form-data
- 它會將請求體的數據處理為一條消息, 以標簽為單元, 用分隔符分開, 既可以上傳鍵值對, 也可以上傳文件
常見的配置選項
-
請求地址 :
url: '/user' -
請求類型 :
method: 'get' -
請求路徑 :
baseURL: 'http://' -
請求的數據處理 :
transformRequest: [function(data){}] -
請求的數據處理 :
transformResponse: [function(data){}] -
自定義的請求頭 :
headers: {'x-Requested-With' : * 'XMLHttpReqyest'} -
URL查詢對象 :
params: {id: 12} -
查詢對象序列化函數 :
paramsSerializer: function(params) {} -
request body :
data: {key: 'aa'} -
超時設置 :
timeout: 1000 -
跨域是否帶 token :
withCredentials: false -
自定義請求處理 :
adapter: function(resolve, reject, * config) {} -
身份驗證信息 :
auth: {uname: '', pwd: '12'} -
響應的數據格式 :
responseType : 'json'- json
- blob
- document
- arraybuffer
- text
- stream
Axios 實例
為什么要創建 Axios 的實例呢?
當我們從 Axios 模塊中導入對象時, 使用的實例是默認的實例, 當給該實例設置一些默認配置時, 這些配置就被固定下來了
但是后續開發中, 某些配置可能會不太一樣, 比如某些請求需要使用特定的 baseURL 或者 timeout 或者 content-Type 等, 這時我們就可以創建新的實例, 并且傳入屬于該實例的配置信息, 這里推薦使用實例的方式, 而不使用全局的方式
import axios from 'axios'
// 創建新的實例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
// 發送網絡請求
instance({
url: '/category',
method: 'get'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
Axios 封裝
為什么要封裝呢? 萬一哪天這個框架不維護了呢?
那維護項目就只能加班加點了 (通宵警告), 所以封裝后的代碼更易維護
封裝有多種方式, 這里展示個人認為比較優美的封裝方式
攔截器
Axios 提供了攔截器, 用于我們每次發送請求或者得到請求響應后, 進行對應的處理, 例如有些頁面或功能需要用戶登陸模式才可以訪問, 那此時就可以在用戶請求頁面時利用攔截器做登陸驗證了
