网络请求库：axios
这个网络请求库内部是ajax,封装之后使用更为便捷，且其功能就是发送请求，因此容量很小，还能很方便地和其他库结合，比如vue.
首先当然是导包，这一步不再啰嗦。只要在一个script标签中添加：src="https://unpkg.com/axios/dist/axios.min.js"就可以了。
其请求方式共有两种，分别是get和post.其格式均为：axios.方式(请求地址).then(function(){}, function(){}).对于具体的请求方式，请求地址后跟的参数会有所不同。then方法中的回调函数会在请求成功或失败时触发。成功时，调用的是第一个回调函数；失败时则为第二个。我们具体看看这两种请求方式应该怎么写，写一起好了：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Titletitle>
head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=6")
.then(function (response) {
console.log(response);
}, function (err) {
console.log(err);
})
}
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg",
{username:"其他用户名"}).then(function (response) {
console.log(response);
}, function (err) {
console.log(err);
})
}
script>
body>
html>
此时在对应的页面中会出现两个按钮，差不多长这样：
先看get：
get请求的是一个笑话网站，因此这里我获取了6个笑话。其方式就是在请求地址后面加个参数，num=6就行了，本质就是键值对的形式。
接下来看post:
如果我再点一次post请求按钮：
所以注册啥的还是没问题的。
当然了，如果请求地址出错，那么肯定是会打印出对应的错误信息的，这里就不演示了。
我们来看看axios和vue的结合：
现在我想用get方式在那个笑话的网站获取笑话，并希望一点击一个按钮，下面就会有一条笑话显示出来，再点击，笑话更新。
显然，我们需要一个笑话的数据渲染在按钮下面，直接在data中定义一个joke就好了，随便给个初始值。
然后需要一个按钮，这个按钮还要绑定一个函数，这个函数里面，显然就是axios请求的代码。
当然了，由于我们定义在data中的joke这个是有一个初始值的，而我们想要实现点击就更新的话，其本质就是把获取到的数据赋给这个joke.但是，这里会有一个问题，我们可以直接this.joke = response.data吗？答案是不行的，我直接说了就。你可以去测试一下，这里的this.joke会变（打印出来是：undefined）。因此，我们还需要在axios发送请求之前，把这个原来的数据保存，直接var that = this就可。
下面看代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Titletitle>
head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{ joke }}p>
div>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function () {
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(function (response) {
that.joke = response.data;
console.log(response.data);
console.log(this.joke);
}, function (err) {
console.log(err);
})
}
}
})
script>
body>
html>
效果：
现在我点击一下那个按钮：