axios介绍

使用文档:http://www.axios-js.com/zh-cn/docs/
axios是一个http库。

支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)

相当于jQuery中的ajax

axios的使用

引用axios进页面

目前只是学习使用，所以直接将cdn文件下载下来，页面中使用src调用本地文件即可。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>

第7行导入axios包

GET请求

这里的接口数据用本地的服务搭起来的，测试的话可以自己去找其他的接口数据代替。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="clickBtn">获取列表</button>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
    
        },
        methods:{
            clickBtn(){
                axios.get("http://10.24.70.16:8000/app/HomeWheel/")
                .then((res)=>{  // 使用箭头函数代替原始的函数写法
                    console.log(res)
                })  // .then是es6中的用法，意思为数据请求成功之后的回调函数
            }
        }
    })
</script>

第13行创建一个按钮点击事件绑定clickBtn方法
24-29行使用axios发起get请求，回调函数中打印响应内容

测试页面：

可以看到成功接收到服务器的接口数据

接着将接收到的数据循环呈现在页面中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0; list-style: none;}
        li{ width:200px;border:1px solid #efefef}
        li img {width:100% }
        li h3{ font-size:20px; font-weight:400 }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="clickBtn">获取列表</button>
        <ul>
            <li v-for="item in listArr">
                <img :src="item.img" alt="">
                <h3>{{item.name}}</h3>
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            listArr:[]
        },
        methods:{
            clickBtn(){
                axios.get("http://10.24.70.16:8000/app/HomeWheel/")
                .then((res)=>{  // 使用箭头函数代替原始的函数写法
                    console.log(res)
                    this.listArr=res.data
                })  // .then是es6中的用法，意思为数据请求成功之后的回调函数
            }
        }
    })
</script>

第33行新建一个listArr数组用来接收get请求响应的数据
20-25行使用v-for循环读取数组，并且将图片和商品名渲染出来（注意图片的src属性在读取url时需要使用v-bind绑定js变量item.img）

携带参数使用GET请求

当发起get请求时需要携带参数，直接在url后面使用字符串拼接，但是这样很麻烦，在axios中可以使用params来追加参数:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{ background-color: #f4f4f4;}
        *{padding: 0;margin: 0; list-style: none;}
        li{ width:200px;border:1px solid #efefef; background:#fff; margin:10px;}
        li img {width:100% }
        li h3{ font-size:20px; font-weight:400 }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="clickBtn">获取列表</button>
        <ul>
            <li v-for="item in listArr">
                <img :src="item.good_main_img" alt="">
                <h3>{{item.good_name}}</h3>
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            listArr:[]
        },
        methods:{
            clickBtn(){
                axios.get("http://10.24.70.16:8000/app/goodslist/?format=json&childid=10001",{
                    params:{
                        format:"json",
                        childid:10001
                    }
                })
                .then((res)=>{  // 使用箭头函数代替原始的函数写法
                    console.log(res)
                    this.listArr=res.data
                })  // .then是es6中的用法，意思为数据请求成功之后的回调函数
            }
        }
    })
</script>

38-43行使用params对象来追加参数

测试页面:

POST请求

官网示例:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios传递相关配置来创建请求（常用）

上面介绍的get,post请求写法不是常用，下面介绍了一个通用格式写法:

            clickBtn(){
                axios({
                    method: 'get',   // 直接设置请求
                    url:"http://10.24.70.16:8000/app/goodslist/",
                    params:{
                        format:"json",
                        childid:10001
                    }
                })
                .then((res)=>{  // 使用箭头函数代替原始的函数写法
                    console.log(res)
                    this.listArr=res.data
                })  // .then是es6中的用法，意思为数据请求成功之后的回调函数
            }