axios基本使用 功能强大的网络请求库
axios必须先导入才可以使用使用get或post方法即可发送对应的请求then方法中的回调函数会在请求成功或失败时触发通过回调函数的形参可以获取响应内容，或错误信息了解更多关于axios功能 <input type="button" value="get请求" class="get"> <input type="button" value="post请求" class="post"> <!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> /* 接口1:随机笑话 请求地址:https://autumnfish.cn/api/joke/list 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话 */ document.querySelector(".get").onclick = function() { axios.get("https://autumnfish.cn/api/joke/list?num=6") // axios.get("https://autumnfish.cn/api/joke/list1234?num=6") .then(function(response) { console.log(response); }, function(err) { console.log(err); }) } /* 接口2:用户注册 请求地址:https://autumnfish.cn/api/user/reg 请求方法:post 请求参数:username(用户名,字符串) 响应内容:注册成功或失败 */ document.querySelector(".post").onclick = function() { axios.post("https://autumnfish.cn/api/user/reg", { username: "阿钬" }) .then(function(response) { console.log(response); console.log(this.skill); }, function(err) { console.log(err); }) } </script>axios+vue
axios回调函数中的this已经改变，无法访问到data中数据把this保存起来，回调函数中直接使用保存的this即可和本地应用最大的区别就是改变了数据来源 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <input type="button" value="得到一条笑话" @click="getJoke"> <span>{{ joke }}</span> <script> const app = new Vue({ el: '#app', data: { joke: '真好笑！针不戳！' }, methods: { getJoke: function() { let that = this; axios.get('https://autumnfish.cn/api/joke').then(function(response) { that.joke = response.data; }, function(err) {}) } } }) </script> </div>