Vue学习笔记6-axios + vue / 案例：查询天气

最新推荐文章于 2022-10-09 00:04:05 发布

杨蛋蛋~R

最新推荐文章于 2022-10-09 00:04:05 发布

阅读量344

点赞数 1

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_50119334/article/details/109356003

版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用axios与Vue.js结合开发网络应用，特别是一个查询天气的案例。在实现过程中，提到了在axios回调函数中处理this指向问题的方法，并强调了这种开发方式与本地应用在数据来源上的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios 结合 vue 开发网络应用

例：

 <div id="app">
        <input type="button" value="获取" @click="getJoke">
        <p>{{ joke }}</p>
    </div>
    <!-- vue开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- axios的在线地址 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
    <!-- 二者没有依赖关系，先导入谁都没关系 -->
    <script>
        // 接口1：随机获取一条笑话
        // 请求地址：https://autumnfish.cn/api/jokes
        // 请求方法：get
        // 请求参数:无
        // 响应内容：随机笑话 
        var app = new Vue({
            el: "#app",
            data: {
                joke: "笑话",
            },
            methods: {
                getJoke: function() {
                    var that = this;
                    //把 this 存储起来，防止变化
                    axios.get("https://autumnfish.cn/api/joke")
                        .then(function(response) {
                            console.log(response);
                            //获取笑话的数据
                            that.joke = response;
                        }, function(err) {
                            console.log(err);
                            //错误处理
                        })
                }
            }
        })
    </script>

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

案例：查询天气

html 代码：

<body>
    <div id="app">
        <div class="title">
            <span>(๑•̀ㅂ•́)و✧</span><span class="weath">&nbsp;Weather</span>
        </div>
        <div class="search">
            <input type="" name="" v-model="city" @keyup.enter="searchWeather" placeholder="请输入城市名来查询天气">
            <a href="javascript:;" class="search-btn" @click="searchWeather">搜 索</a>
            <ul class="recomme">
                <li @click="changeWeather('北京')">北京</li>
                <li @click="changeWeather('上海')">上海</li>
                <li @click="changeWeather('深圳')">深圳</li>
                <li @click="changeWeather('成都')">成都</li>
            </ul>
        </div>
        <div class="weather-result">
            <ul class="clearfix">
                <li v-for="item in weatherList">
                    <h3>{{ item.wea }}</h3>
                    <span class="temperator">最低{{ item.tem2 }}℃ 最高{{ item.tem1 }}℃</span>
                    <span class="date">{{ item.day }}</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="band"></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="js/天气预报.js"></script>
</body>

js 代码

// 请求地址：http://wthrcdn.etouch.cn/weather_mini
// 请求方法：get
// 请求参数：city（城市名）
// 响应内容：天气信息

// 1.点击回车
// 2.查询数据
// 3.渲染数据

var app = new Vue({
    el: "#app",
    data: {
        city: "",
        weatherList: [],
    },
    methods: {
        searchWeather: function() {
            //保存this
            var that = this
                // 调用接口
            axios.get("http://www.tianqiapi.com/api?version=v9&appid=82136948&appsecret=q3atkYkJ&city=" + this.city).then(function(response) {
                // console.log(response);
                that.weatherList = response.data.data.slice(0, 5);
                //slice 返回数组的指定部分，从第0个开始往后五个
            }).catch(function(err) {})
        },
        changeWeather: function(city) {
            this.city = city
            this.searchWeather()
        }
    }
})