(一）axios网络请求库
为了使用这个js库，应该先进行倒包
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址?查询字符串).then(function(response){},function(err){})
axios.post(地址:查询字符串).then(function(response){},function(err){})
查询字符串的格式写为：
axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2).then(function(response){},function(err){})
- axios必须先导入再使用
- 使用get或post方法即可发送对应请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取响应内容或者错误信息
axios文档传送门：https://github.com/axios/axios
例子：
<body>
<div id="app">
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
</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>
//接口1 随机笑话
//请求地址：https://autumnfish.cn/api/joke/list
//请求参数：num（笑话条数，数字）
//响应内容：随机笑话
document.querySelector(".get").onclick = function() {
axios.get("https://autumnfish.cn/api/joke/list?num=6")
.then(function(response) {
console.log(response)
})
}
//测试请求错误，输入一个不存在的get地址，err的function会在请求不成功时返回错误信息
// document.querySelector(".get").onclick = function() {
// axios.get("https://autumnfish.cn/api/joke123/list?num=6")
// .then(function(response) {
// console.log(response)
// }, function(err) {
// console.log(err);
// })
// }
//接口2：用户注册
//请求地址：https://autumnfish.cn/api/user/reg
//请求参数：username(用户名，字符串)
//响应内容：注册成功或失败
document.querySelector(".post").onclick = function() {
axios.post("https://autumnfish.cn/api/user/reg", {
username: "wangjunkai"
})
.then(function(response) {
console.log(response)
})
}
//测试请求错误，输入一个不存在的post地址，err的function会在请求不成功时返回错误信息
// document.querySelector(".post").onclick = function() {
// axios.post("https://autumnfish.cn/api/user123/reg", {
// username: "wangjunkai"
// })
// .then(function(response) {
// console.log(response)
// })
// }
</script>
</body>
请求成功
989d215b09ed14778f7cbcfa0f3cb9c.png
无效地址引起请求失败，返回错误信息
9e6f5f8ca3af0ea4b399752c987b772.png
请求成功
fd41b9f7d7ca71e3d72c838812904c2.png
network可以看到其内部属于AJAX
e89a1bfbffb50ada5c19d7eb591491d.png
（二）axios+vue，随即笑话实例
- axios回调函数中this已经改变，无法访问到data中数据
- 应在回调前先把this保存起来，回调时直接使用保存的this
- 其与本地应用最大区别是改变了数据来源，从网络获取数据
<body>
<div id="app">
<input type="button" value="获取笑话" class="get" @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>
//接口1 随机笑话
//请求地址：https://autumnfish.cn/api/joke
//请求参数：无
//响应内容：随机笑话
var app = new Vue({
el: "#app",
data: {
joke: "很好笑的笑话"
},
methods: {
getJoke: function() {
console.log(this.joke)
//注意，this会变化
var that = this;
axios.get("https://autumnfish.cn/api/joke")
.then(function(response) {
console.log(this.joke)
console.log(that.joke)
console.log(response.data)
that.joke = response.data
}, function(err) {})
}
}
})
</script>
</body>
网友评论