Vue基础-7(axios+vue，实现数据获取+数据刷新)

Vue基础-7

axios:功能强大的网络请求库 axios必须先导入才可以使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> $ npm install axios $ bower install axios

使用get或post方法即可发送对应的请求 then方法中的回调函数会在请求成功或失败时触发 (第一个函数为请求成功触发。第二个函数为请求失败触发) 通过回调函数的形参可以获取响应内容，或错误信息

get/post模版语法：

axios.get(地址?key=value&key2=value2).then(function(response){},function(err){}) axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

axios实现get/postDemo:

<input type="button" value="get请求" class="get" id="get" /> <input type="button" value="post请求" class="post" /> /* 接口1：随机笑话 请求地址：https://autumnfish.cn/api/joke/list 请求方法：get 请求参数：num(笑话条数，数字) 响应内容：随机笑话 */ document.querySelector("#get").onclick = function(){ axios.get("https://autumnfish.cn/api/joke/list?num=8") .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:"luC1!"}) .then(function(response){ console.log(response); },function(err){ console.log(err); }) }

axios+vue：获取+展示随机笑话 axios回调函数中的this已经改变，无法访问到data中数据 定义变量把this保存起来，回调函数中直接使用保存的this即可 和本地应用的最大区别就是改变了数据来源

<div id="app"> <input type="button" value="获取笑话" @click="getJoke" /> <p>{{joke}}</p> </div> var app = new Vue({ el:"#app", data:{ joke:"很好笑的笑话" }, methods:{ getJoke:function(){ // console.log(this.joke); let that = this; axios.get("https://autumnfish.cn/api/joke/list?num=1") .then(function(response){ // console.log(response.data.jokes); // console.log(that.joke); that.joke = response.data.jokes[0]; },function(err){ console.log(err); }) } }, })