Vue网络及应用axios

axios基本使用

• axios必须先导入才可以使用
• 使用get或者post方法即可发送请求，
• then方法的回调函数会在请求成功或者失败时触发
• 通过回调函数形参可以获取响应内容或者错误信息
• axios文档

<div id="app">
        <input type="button" value="get请求" class='get'>
        <input type="button" value="post请求" class='post'>
    </div>
    <script>
        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);
            }
        },

        document.querySelector(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg",{
                username:"ssc"
            })
            .then(function(response){
                console.log(response);
            }),function(err){
                console.log(err);
            }
        }
    </script>

axios+Vue

• axios回调函数中的this已经改变，无法直接访问到data中的数据
• 把this保存起来，回调函数中直接使用保存的this即可
• 和本地最大区别就是改变了数据来源

 <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").then(function(response){
                        console.log(response.data);
                        that.joke = response.data;
                    },function(err){
                        console.log(err);
                        
                    })
                }
            },
        })
    </script>

• 效果图
  

天知道小程序

var app = new Vue({
    el:'#app',
    data:{
        city:'',
        weatherList:[],
        cityList:['北京','贵阳','襄阳','武汉']
    },
    methods:{
        buttonSearch:function(p){
            var that = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.cityList[p])
            .then(function(response){
                that.weatherList = response.data.data.forecast;
                console.log(that.weatherList);
            })
            .catch(function(err){

            })
        },
        searchWeather:function(p){
            console.log(this.city);
            var that = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
            .then(function(response){
                that.weatherList = response.data.data.forecast;
                console.log(that.weatherList);
            })
            .catch(function(err){

            })
        },
    }
})

<div id="app">
        <input type="text" v-model='city' @keyup.enter='searchWeather' placeholder="请输入你想知道天气的城市">
        <input type="button" value="搜索" @click='searchWeather'>
        <ul  style="display: flex;">
            <span v-for='(item,index) in cityList'  @click='buttonSearch(index)' style="margin: 20px;">
                {{item}}
            </span>
        </ul>
        <ul style="display: flex;">
            <li v-for="item in weatherList" style="width: 100%;">
                {{item.date}}
                <br>
                {{item.high}}---{{item.low}}
                <br>
                {{item.type}}
            </li>
        </ul>
    </div>
    <script src="./main.js"></script>

• 效果图