vue.js中Axios的使用
1.什麼是Axios
Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
跟ajax一樣都會是用來與後臺互動的,但兩者之間又有著區別
以下是知乎上的一段話:
axios是通過promise實現對ajax技術的一種封裝,就像jQuery實現ajax封裝一樣。
簡單來說: ajax技術實現了網頁的區域性資料重新整理,axios實現了對ajax的封裝。
axios是ajax ajax不止axios
這段話可以很好地詮釋兩者之間的關係
juuery ajax主要是針對mvc的程式設計,越來越跟不上現在的節奏了,而且juuery太大,單獨為了ajax而引入jquery有點得不償失,隨著越來越多的框架的崛起,jquery的路有些越走越窄
而axios具有以下特點
從 node.js 建立 http 請求
支援 Promise API客戶端
支援防止CSRF
提供了一些併發請求的介面(重要,方便了很多的操作)
相對於ajax,axios更小巧
說了這麼多,大家應該也理解了,兩者之間的區別,那麼接下來就給大家介紹一下具體用法
先來看一段程式碼
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
對於瀏覽器的支援
同事支援多個請求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 兩個請求現在都執行完成
}));
如何安裝呢
使用 npm :
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>