05: 使用axios/vue-resource发送HTTP请求

1.1 axios 简介与安装

　　1、axios简介

　　　　　　1. vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现

　　　　　　2. axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护

　　　　　　3. 参考：GitHub上搜索axios，查看API文档：https://github.com/axios/axios

　　2、安装axios

　　　　　　1. npm install axios -S # 也可直接下载axios.min.js文件

　　　　　　2. 下载后即到 C:\Users\tom\node_modules\axios\dist 路径下找到 axios.min.js 文件

1.2 axios 基本用法

　　1、 axios最基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
  <button @click="sendGet">GET方式发送AJAX请求</button>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
  window.onload=function(){
    new Vue({
      el:'#itany',
      data:{
        uid:''
      },
      methods:{
        sendGet(){
          // 1、发送get请求
          axios({
            url: 'http://127.0.0.1:8000/data/',                 //1、请求地址
            method: 'get',                                        //2、请求方法
            params: {ids: [1,2,3],type: 'admin'},                //3、get请求参数
          })
          // 2、回调函数
          .then(resp => {
            console.log(resp.data);
          })
          // 3、捕获异常
          .catch(err => {
            console.log('请求失败：'+err.status+','+err.statusText);
          });
        }

      }
    });
  }
</script>
</body>
</html>

get: axios最基本get请求参数