什么是axios
- axios是一個獲取后臺數(shù)據(jù)的插件
- 地址https://www.npmjs.com/package/axios
- 使用 前提得安裝node.js
- 頁面直接引用 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- 下載 選中文件夾 shift+右鍵 調(diào)出命令窗口 輸入 npm i axios -g
axios的特性
1.可以從瀏覽器中創(chuàng)建XHR對象
2蜡感、可以從nodeJS中創(chuàng)建HTTP請求
3衙熔、支持Promise
4、可以攔截請求和響應
5燃逻、可以轉換請求數(shù)據(jù)和響應數(shù)據(jù)
6先馆、可以取消請求
7诬留、可以自動轉換JSON數(shù)據(jù)
8、客戶端支持防御XSRF
獲取數(shù)據(jù)：
路徑為后臺數(shù)據(jù)接口
在用axios獲取后臺數(shù)據(jù)時，
get function(){
var url = '路徑'
axios.get(url,{params:參數(shù)}).then(function(儲存后臺數(shù)據(jù)的變量：A){ //then為成功后的回調(diào)
對象名.渲染頁面的函數(shù)名(A.data) // data是在使用axios的時候，axios給數(shù)據(jù)添加了一個data來封裝獲得的數(shù)據(jù)，
}).catchcatch(function (用來儲存錯誤信息的變量：error){ // 捕捉錯誤
alert(error) // 請求失敗之后,執(zhí)行這個函數(shù)
})
}
- axios get 方法
僅僅請求后臺數(shù)據(jù)
axios.get('index.php')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
帶參數(shù)請求后臺數(shù)據(jù)
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
當然腻扇，也可以把參數(shù)數(shù)據(jù)直接寫到URL中
// 為給定 ID 的 user 創(chuàng)建請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
- aixos post方法
一般來說，post請求更多的是要提交數(shù)據(jù)植捎，params屬性里的數(shù)據(jù)會出現(xiàn)在請求主體中衙解。
[注意]如果是axios.create()方法中的params屬性，則其里面的數(shù)據(jù)會出現(xiàn)在URL參數(shù)中焰枢。
但實際上蚓峦，post方法不需要使用params屬性，它的第二個參數(shù)就是要發(fā)送的數(shù)據(jù)济锄。
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
多并發(fā)請求,一次性發(fā)幾個請求
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) {
// acct為第一個請求的結果暑椰，perms為第二個請求的結果
}));
