一、axios的基本使用
axios 是一個功能強大的網絡請求庫。
axios官網地址
使用方法：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
key是由接口文檔提供，而value是具體傳輸的數據。
這裏提供兩個接口用於測試。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios的基本使用</title>
</head>
<body>
<div id="app">
<input type="button" value="get請求" @click="getMethod">
<input type="button" value="post請求" @click="postMethod">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const app = new Vue({
el:'#app',
methods:{
/*
接口1：隨機笑話
請求地址：https://autumnfish.cn/api/joke/list
請求方法：get
請求參數：num(笑話條數)
響應內容：隨機笑話
*/
getMethod:function () {
axios.get("https://autumnfish.cn/api/joke/list?num=7").then(function (response) {
console.log(response);
},function (error) {
console.log(error);
});
},
postMethod:function () {
/*
接口1：隨機笑話
請求地址：https://autumnfish.cn/api/user/reg
請求方法：post
請求參數：username:用戶名
響應內容：註冊成功或失敗
*/
axios.post("https://autumnfish.cn/api/user/reg",{username:"太子殿下"}).then(function (response) {
console.log(response);
},function (error) {
console.log(error);
});
},
}
});
</script>
</body>
</html>
二、axios+vue的使用
使用如下的接口進行測試。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios+vue的使用</title>
</head>
<body>
<div id="app">
<input type="button" value="獲取笑話" @click="getJoke">
<p> {{ joke }} </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
joke:"很好笑的笑話"
},
methods:{
/*
接口：隨機獲取笑話
請求地址：https://autumnfish.cn/api/joke
請求方法：get
請求參數：無
響應內容：隨機笑話
*/
getJoke:function () {
// console.log(this.joke);
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(function (response) {
/*console.log(response);*/
console.log(response.data);
//console.log(this.joke);
that.joke = response.data;
},function (error) {
console.log(error);
});
},
}
});
</script>
</body>
</html>
注意：
