在VUE3中通過Axios獲取其他接口或JSON的值。
什么是Axios?
Axios 是一個基于 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
- Github開源地址：?https://github.com/axios/axios
- 官方文檔地址：https://axios-http.com/zh/
- 從瀏覽器創建?XMLHttpRequests
- 從 node.js 創建?http?請求
- 支持?Promise?API
- 攔截請求和響應
- 轉換請求和響應數據
- 取消請求
- 自動轉換JSON數據
- 客戶端支持防御XSRF
Axios有啥用？
axios負責與后端交互，get、post后端接口信息，相當前后端的窗口
- ?創建 http 請求，向后端發送請求并接收 返回的數據
- 自動轉換JSON數據（就相當于把數據反序列化一下）
- 對返回的數據統一處理（相當后臺數據統一過濾一遍，再傳給前端）
- 攔截請求和響應
如何使用？
您現在需要將后端通過PHP提供的JSON數據展示在前端
首先，我們撰寫json_data.php文件，輸入以下代碼，提供JSON文件，以供模擬
<?php
header('Content-Type:application/json');//加上這行,前端那邊就不需要var result = $.parseJSON(data);
$retdata = array(
"student"=>array("name"=>"feiq","sex"=>"male","age"=>18,"job"=>'agineer'),"superstar"=>array("name"=>"MM","sex"=>"female","age"=>20,"job"=>'signer')
);
echo json_encode($retdata);
?>我們撰寫index.html，展示PHP提供的，JSON的內容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>從php文件中異步獲取json數據</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="myphp">
<p>從php文件中讀取json數據</p>
<ol>
<li>名字</li>
<li v-for="sites in info">{{sites.name}}</li>
</ol>
<ol>
<li>性別</li>
<li v-for="sites in info">{{sites.sex}}</li>
</ol>
<ol>
<li>年齡</li>
<li v-for="sites in info">{{sites.age}}</li>
</ol>
<ol>
<li>職業</li>
<li v-for="sites in info">{{sites.job}}</li>
</ol>
</div>
<script>
const App = Vue.createApp({
data() {
return {
info: [],
}
},
mounted() {
axios
.get('test.php')
.then(response => {
console.log(response);
this.info = response.data;
})
.catch(function (error) {
alert(error)
})
}
})
App.mount("#myphp")
</script>
</body>
</html>其中的json_data.php文件，一般長這樣
http://www.kartiktrivedi.com/test/json_data.php效果如下：
讀取一維數組，二維數組
test.php提供JSON數據
<?php
header('Content-Type:application/json');//加上這行,前端那邊就不需要var result = $.parseJSON(data);
$json_data = array ('id'=>1355471563,'name'=>"npc",'country'=>'usa',"office"=>array("microsoft",'oracle'=>'http://www.kartiktrivedi.com/'));
$json_num = json_encode($json_data);
echo $json_num;
?>index.php展示test.php的數據
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>從php文件中異步獲取json數據</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="myphp">
<p>從php文件中讀取json數據</p>
<ol>
<li>id</li>
<li>{{this.info.id}}</li>
</ol>
<ol>
<li>name的值</li>
<li>{{this.info.name}}</li>
</ol>
<ol>
<li>country</li>
<li>{{this.info.country}}</li>
</ol>
<ol>
<li>oracle的值</li>
<li v-for="sites in info">{{sites.oracle}}</li>
</ol>
<ol>
<li>彈出一維數組內容</li>
<li><button @click="openText()">彈出文本</button></li>
</ol>
<ol>
<li>彈出二維數組內容</li>
<li><button @click="openLink()">彈出二維數組內容</button></li>
</ol>
</div>
<script>
const App = Vue.createApp({
data() {
return {
info: [],
}
},
methods: {
openText() {
alert(this.info.name)
},
openLink() {
alert(this.info.office.oracle)
}
},
mounted() {
axios
.get('test.php')
.then(response => {
console.log(response);
this.info = response.data;
})
.catch(function (error) {
alert(error)
})
}
})
App.mount("#myphp")
</script>
</body>
</html>展示效果
代碼解釋
created() {
//用axios去getphp文件'getshow.php'
axios.get('getshow.php')
//then獲取成功；response成功后的返回值（對象）
.then(response=>{
//可以打印出對象
console.log(response);
//將數據賦值給menulist
this.menulist=response.data;
})
//抓住獲取失敗 提示錯誤
.catch(error=>{
console.log(error);
alert('網絡錯誤，不能訪問');
})
},
