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);
        })
     }
   },
})