axios发送异步请求的格式

学习完vue之后，可以使用和vue配合插件axios来实现ajax异步请求

axios中文官网：起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

使用axios发送get请求：在下方axios中，then为回调函数，第一个function为成功后执行的函数，第二个为失败执行的函数

axios.get(url?携带的参数key=value&key2=value2).then(function(response){},function(err){})

使用axios发送post请求：

axios.post(url,{key:value,key:value}).then(function(response){},function(err){})

axios发送异步请求的步骤

（1）引入axios的插件js：unpkg.com/axios/dist/…

<script type="text/javascript" src="js/axios.min.js"></script>

（2）使用vue+axios发送异步请求

<body>
<div id="app">
  <button @click="fun()">笑话按钮</button>
  <ul>
    <li v-for="w in jokes">{{w}}</li>
  </ul>
</div>
</body>
<script>
  let vue = new Vue({
    el:"#app",
    data:{
        jokes:[]
    },
    methods:{
      fun(){
/*通过axios向服务器发送请求，从而来响应数据，成功九执行函数，失败就不执行，回调函数的参数表示服务器响应的数据，
为了现在操作方便，先暂时调用第三方接口,(以后调用的接口大多都是自己写的controller方法接口)*/
        axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(res){
          vue.jokes=res.data.data;
            console.log(vue.jokes)
        })
      }
    }
  });
</script>

vue+axios实现ajax异步请求获取服务端数据

axios发送异步请求的格式

axios发送异步请求的步骤