网络应用-axios

---

前言

本文介绍Vue的网络应用axios的学习过程
参考视频：黑马程序员

---

一、axios基本使用

axios ：功能强大的网络请求库

1. axios 必须先导入才可以使用；
2. 导入：官网提供的在线地址
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
3. 使用 get 或 post 方法即可 发送对应的请求；
4. then 方法中的回调函数会在请求成功或失败时触发；
5. 通过回调函数的形参可以获取响应内容或错误信息

1.get方法

get请求的使用方法：

axios.get("地址?查询字符串").then(function(response){},function(err){})

//填入查询字符串
axios.get("地址?key1 = value1&key2=value2").then(function(response){},function(err){})

代码如下（示例）：
创建一个按钮，点击按钮发送请求
提供接口：

    <input type="button" value="get请求" class="get">

document.querySelector(".get").onclick = function(){
						//随机获取笑话的接口
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }

2. post方法

post请求的使用方法：

axios.post("地址,参数对象").then(function(response){},function(err){})

//填入参数对象
axios.post("地址,{key1:value1,key2:value2}").then(function(response){},function(err){})

代码如下（示例）：
创建一个post请求按钮，点击按钮触发事件发送post请求
用户注册接口：

<input type="button" value="post请求" class="post">

document.querySelector(".post").onclick = function(){
						//用户注册接口1
            axios.post("https://autumnfish.cn/api/user/reg",
            {username:"shaowenke"})
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }

二、axios + Vue

注意：axios回调函数中的this已经改变，无法访问到data中的数据；

解决办法：把this保存起来，回调函数中直接使用保存的this即可

和本地应用最大的区别就在于数据来源

代码如下（示例）：

<!-- 需同时导入Vue和axios包 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <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，this会变，因此需要将this保存起来
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(function(response){
                        console.log(response.data);
                        that.joke = response.data;
                        
                    },function(err){
                        console.log(err);
                    })
                },
            }
        })
    </script>

效果图：

三、天知道

1. 回车查询

（1）按下回车（v-on .enter）
（2）查询数据（axios 接口 v-model ）
（3） 渲染数据（v-for 数组 that）

应用的逻辑代码建议和页面分离，使用单独的js文件编写
axios回调函数中this指向改变了，需要额外保存一份
服务器返回的数据比较复杂时，获取的时候需要注意层级结构

2. 点击查询

（1）点击城市（v-on 自定义参数）
（2）查询数据（this.方法()）
（3）渲染数据

自定义参数可以让代码的复用性更高
methods中定义的方法内部，可以通过this关键字点出其他的方法

代码如下（示例）：
注：获取天气接口得到api找不到啊，所以示例代码中也是有问题的接口o~

<!--这里只是body中的内容-->
<div class="wrap" >
        卢知道
    </div>
    <div class="search_forms">

    </div>
    <div class="logo">

    </div>
    <div class="form_group" id="app">
        <input  type="text" @keyup.enter="searchWeather" 
        class="input_txt" placeholder="请输入查询城市" v-model="city">
       
        <button class="input_sub" @click="searchWeather">
            搜索
        </button>
    
    <div class="hotkey">
        <a href="javascript:;" @click="getWeather('北京')">北京</a>
        <a href="javascript:;" @click="getWeather('上海')">上海</a>
        <a href="javascript:;" @click="getWeather('广州')">广州</a>
        <a href="javascript:;" @click="getWeather('深圳')">深圳</a>
    </div>
    <h2>{{ city }}</h2>
    <ul class="weather_list" >
        <li v-for="item in weatherList">
            <p>{{ item.date }} {{ item.week }}</p>
            <span>{{ item.wea }} {{ item.tem}}</span>
        </li>
    </ul>
</div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="./main.js" type="text/javascript" language="javascript"></script>
    

var app = new Vue({
    el:'#app',
    data:{
        city:'',
        weatherList:[],
    },
    methods:{
        searchWeather:function(){
            var that = this;
            axios.get("http://ajax-api.itheima.net/api/weather?city="+that.city)
            .then(function(response){
                // console.log(response.data.data.data);
                that.weatherList = response.data.data.data;
            }).catch(function(err){})
        },
        getWeather:function(city){
            this.city = city;
            this.searchWeather();
        }
    }
})

效果图：

3. 天知道综合应用小结

（1）使用独立的js文件
（2）要注意挂载js的作用范围
本人就因为忽略挂载范围，导致li标签的数据不渲染到数组中，死磕了好久
（3）在methods中通过this关键字点出其他方法，提高代码的复用性

---

总结

学完了axios，基本使用是get请求和post请求