什么是 axios
axios 介紹
根據(jù)我的理解就是對(duì)于原生ajax的一個(gè)封裝，以達(dá)到方便使用異步刷新的目的。
ajax是什么呢?（Asynchronous JavaScript And XML，異步的JavaScript和XML） 首先要理解異步刷新，簡(jiǎn)單來(lái)說(shuō)就是一個(gè)對(duì)于一個(gè)前端頁(yè)面，總體的頁(yè)面內(nèi)容不刷新，局部的頁(yè)面進(jìn)行刷新，比如：大家都進(jìn)行過(guò)網(wǎng)購(gòu)，在購(gòu)物網(wǎng)站的首頁(yè)當(dāng)選擇某個(gè)標(biāo)簽時(shí)，下面的分類和商品也相應(yīng)的變化了，但是頁(yè)面其它部分的內(nèi)容并沒(méi)有改變，這就是異步刷新，還有就是在使用百度搜索時(shí)，你會(huì)發(fā)現(xiàn)輸入部分內(nèi)容相關(guān)的內(nèi)容也會(huì)呈現(xiàn)出來(lái)，這也是異步刷新。
作用：
數(shù)據(jù)交換：通過(guò)Ajax可以給服務(wù)器發(fā)送請(qǐng)求，并獲取服務(wù)器響應(yīng)的數(shù)據(jù)。
異步交互：可以在不重新加載整個(gè)頁(yè)面的情況下，與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的技術(shù)，如：搜索聯(lián)想、用戶名是否可用的校驗(yàn)等等。
ajax和axios有什么區(qū)別呢？
根據(jù)我的理解就是對(duì)于原生ajax的一個(gè)封裝，使用起來(lái)更加的方便快捷。
axios官網(wǎng)： https://www.axios-http.cn/
axios 的使用
頁(yè)面請(qǐng)求方式常用的有2種 get 和 post 請(qǐng)求，這里就對(duì)這種方式進(jìn)行使用說(shuō)明
- 普通方式
<script src="js/axios-0.18.0.js"></script> /*引入js文件*/
<script>
asios({
method: "get",
url:""
}).then(function (res) {
let data = res.data.data;
});
</script>
<script>
asios({
method: "post",
url: "請(qǐng)求資源的地址",
data:"id=1"
}).then(function (res){
let data = res.data.data;
// 返回的對(duì)象的參數(shù) res 函數(shù) 是一個(gè) 回調(diào)函數(shù) 返回的數(shù)據(jù)會(huì)和狀態(tài)碼等 封裝成一個(gè)data對(duì)象
// 第二個(gè)data是第一個(gè)data對(duì)象的一個(gè)參數(shù) 在這里是存放數(shù)據(jù)的
} );
</script>
axios.get("https://yapi.pro/mock/40836/emp/list").then((result) => {
<!-- 回調(diào)函數(shù) callback -->
let res = result.data.data;
})
<script>
<!--目前先寫一個(gè)參數(shù)的，后面再補(bǔ)充-->
axios.post("https://yapi.pro/mock/40836/emp/deleteById","id=1").then((res) => {
console.log(res.data);
});
</script>
ps: 模擬服務(wù)器端地址，如果這個(gè)地址無(wú)法使用了，內(nèi)容如下:
{
"code": 1,
"message": "success",
"data": [
{
"id": 1,
"name": "謝遜",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
"gender": 1,
"job": "班主任",
"entrydate": "2008-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": 2,
"name": "殷天正",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg",
"gender": 1,
"job": "講師",
"entrydate": "2012-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": 3,
"name": "韋一笑",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg",
"gender": 1,
"job": "講師",
"entrydate": "2020-05-09",
"updatetime": "2022-10-01 12:00:00"
},
{
"id": 4,
"name": "黛綺絲",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg",
"gender": 2,
"job": "講師",
"entrydate": "2018-07-09",
"updatetime": "2022-10-01 12:00:00"
}
]
}
axios 工具包下載
在我的上傳資源文件中就可以下載，也可以從官網(wǎng)下載文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-567279.html
axios 使用實(shí)例
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-567279.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ajax-Axios-案例</title>
<script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%" id="table" align="center">
<caption style="font-size: 20px">教師信息表</caption>
<tr id="head">
<th>編號(hào)</th>
<th>姓名</th>
<th>圖像</th>
<th>性別</th>
<th>職位</th>
<th>入職日期</th>
<th>最后操作時(shí)間</th>
</tr>
</table>
<button id="btn" onclick="test()" >location測(cè)試</button>
</div>
<!--https://yapi.pro/mock/40836/emp/list-->
<!--https://yapi.pro/mock/40836/emp/deleteById-->
<!--
使用Axios向指定后臺(tái)發(fā)送請(qǐng)求，將拉取的數(shù)據(jù)渲染成HTML表格
后臺(tái)的數(shù)據(jù)地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list
-->
<script>
let test = function () {
location.reload();
// location.refrush();
};
axios.get("https://yapi.pro/mock/40836/emp/list").then((result) => {
//請(qǐng)求到的數(shù)據(jù) 是一個(gè)js對(duì)象數(shù)組
let objarr = result.data.data;
console.log(objarr);
console.log(objarr[0].src);
let str = "";
// 遍歷對(duì)象數(shù)組
for (let arr of objarr) {
// 拼接
str+="<tr>";
str += "<td>"+arr.id+"</td>";
str += "<td>"+arr.name+"</td>";
str += "<td>"+"<img src='"+arr.image+"' width='70px' height='50px'>"+"</img></td>";
arr.gender ==1 ? str += "<td>"+"男"+"</td>" :str += "<td>"+"女"+"</td>";
str += "<td>"+arr.job+"</td>";
str += "<td>"+arr.entrydate+"</td>";
str += "<td>"+arr.updatetime+"</td>";
str+="</tr>";
}
let innerHTML = document.getElementById("table").innerHTML;
innerHTML += str;
document.getElementById("table").innerHTML = innerHTML;
});
</script>
</body>
</html>
// 支持async/await用法
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
到了這里，關(guān)于axios （ ajax pro ）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
