前言
      本章讲解使用vue结合axios实现网络请求的基本知识
 
方法
1、axios库的获取方法
网址:https://unpkg.com/axios/dist/axios.min.js
 
我们可以将网页上的js内容拷贝到新的js文件axios.min.js
 
 
2、axios请求的基本语法
这里我们提供两个进行测试的网络地址:
 
获取随机笑话:https://autumnfish.cn/api/joke/list
 
请求方法:get
 
请求参数:num,类型为数字,表示笑话的数量
用户注册接口:https://autumnfish.cn/api/joke/user/reg
请求方法:post
请求参数:username,类型为字符串,表示用户名,不能为空
1)axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})
 
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="js/vue.js"></script>

<script src="js/axios.min.js"></script>

<title>Vue指令</title>

</head>

<body>

<div id="app">

<input type="button" value="获取笑话" @click="getJoke"/>

<p>{{joke}}</p>

</div>

<script>

var app = new Vue({

  el: '#app',

  data: {

    joke:"很好笑的笑话"

  },

  methods:{

getJoke:function(){

var that = this;

axios.get("https://autumnfish.cn/api/joke/list?num=1").then(function(response){

that.joke = response.data.jokes[0];

},function(err){});

}

  }

})

</script>

</body>

</html>
 
 
2)axios.post(地址,{key1:value1,key2:value2}).then(function(response){},function(err){})
 
那么post请求希望大家自行的去实现!
————————————————