axios 网络请求库

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

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
    </style>
</head>
<body>
    <input type="button" value="get" class="get">
    <input type="button" value="post" class="post">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        /*
        interface 1 : random joke
        address:
        method:get
        para:num
        response:joke
         */
        document.querySelector('.get').onclick = function () {
            axios.get('https://autumnfish.cn/api/joke/list?num=6')
            .then(function (response) {
                console.log(response)
            },function (err){
                console.log(err)
            } )
        }
        /*
        interface 2 : user register
        address:
        method:post
        para:username
        resopnse:success or fail
         */
        document.querySelector('.post').onclick = function () {
            axios.post('https://autumnfish.cn/api/user/reg',{
                username:'jack'
            }).then(function (response) {
                console.log(response)
            },function (err) {
                console.log(err)
            })
        }

    </script>
</body>
</html>

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

axios+vue

axios回调函数中的this已经改变,无法访问到data中的数据
把this保存起来.回调函数值中直接使用保存的this即可

image.png

<div id="app">
        <input type="button" value="get joke" @click="getJoke">
        <p>{{ joke }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                joke:'funny 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>

实例 - 天气查询

回车查询

按下回车(v-on .enter)
查询数据(axios 接口 v-model)
渲染数据(v-for 数组 that)

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
    </style>
</head>
<body>
    <div class="wrap" id="app">
        <div class="search_form">
            <div class="logo">天气查询</div>
            <div class="form_group">
                <input type="text" class="input_txt" placeholder="请输入查询的城市天气" v-model="city" @keyup.enter="searchWeather">
            </div>
        </div>
        <div class="hotkey">
            <input type="button" value="北京" @click="changeCity('北京')">
            <input type="button" value="上海" @click="changeCity('上海')">
            <input type="button" value="广州" @click="changeCity('广州')">
            <input type="button" value="深圳" @click="changeCity('深圳')">
        </div>
        <ul class="weather_list">
            <li v-for="item in weatherList">
                <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
                <div class="info_temp">
                    <b>{{ item.low }}</b>
                    ~
                    <b>{{ item.high }}</b>
                </div>
                <div class="info_date"><span>{{ item.date }}</span></div>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                city: '',
                weatherList: []
            },
            methods: {
                searchWeather: function () {
                    var that = this
                    axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(
                        function (response) {
                            //console.log(res.data.data.forecast)
                            that.weatherList = response.data.data.forecast
                        }
                    )//then
                },//f
                changeCity:function (city) {
                    this.city = city
                    this.searchWeather()
                }
            }//methods
        })
    </script>
</body>
</html>

这里出现过一个bug,就是在输入框中输入城市名字后,并没有反应
经过排查,发现没有写v-model绑定数据
原先在输入框后面有个button,点击即可查询天气
但是目前还不太会写留个坑