Vue全家桶:vue2+vue3全部搞懂：第三篇，Vue引入axios库发送网络数据请求

最新推荐文章于 2024-06-08 08:37:34 发布

岑梓铭

最新推荐文章于 2024-06-08 08:37:34 发布

阅读量194

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_73991249/article/details/136380619

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前提，建议先学会前端几大基础：HTML、CSS、JS、Ajax，不然不好懂

这一专栏知识将一次性将vue、vue2、vue3全部讲明白

一、回顾一下Ajax的axios库语法怎么写

方法一：

//get请求
axios({
    url: '服务器网址',
    method: 'get',  //get请求是默认的，method可以省略
    params: {
        //get请求的查询参数
    }
}).then(result=>{    //在axios()后跟上.then()调用回调函数
    //网络请求成功了要干什么
}).catch(error=>{
    //网络请求失败了要干什么
})


//post请求
axios({
    url: '服务器网址',
    method: 'post',  //post请求不可以省略
    data: {
        //post请求的发送参数
    }
}).then(result=>{    //在axios()后跟上.then()调用回调函数
    //网络请求成功了要干什么
}).catch(error=>{
    //网络请求失败了要干什么
})

方法二：

//get请求，参数用【?参数1=参数值1&参数2=参数值2】接到网址后面
axios.get('服务器网址').then(
    function(response){
        //请求成功时做什么
    },
    function(err){
        //请求失败时做什么
    }
)

//post请求，参数用【?参数1=参数值1&参数2=参数值2】接到网址后面
axios.post('服务器网址').then(
    function(response){
        //请求成功时做什么
    },
    function(err){
        //请求失败时做什么
    }
)

二、怎么在Vue里用

很简单，简单说就是在Vue的methods里，你想什么时候发送这个网络请求，你就用一个自定义函数包住【axios库】的写法，然后在标签那用【v-on】或者【@事件】指令来调用这个含有【axios库】的【函数】就行了

例子：

<div id="app">
    <button @click="getJoke1">获取一条笑话</button>
    <p>{{ joke1 }}</p>

<!-- 引入axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    let index = 0
    let p = document.querySelector('p')
    new Vue({
        el: '#app',
        data: {
            joke1: '',
            joke2: ''
        },
        methods: {
            getJoke1: function(){
                let that = this
                //在这里需要用网络数据时再引入axios库
                axios.get('https://api-vue-base.itheima.net/api/joke').then(
                    function(response){
                        console.log(this)
                        //会发现，this.joke没有？因为this会变
                        console.log(this.joke)
                        //那么只能用一个变量去保存response（当下的“this”对象）的值
                        that.joke1 = response.data
                        alert('获取成功')
                    },
                    function(err){
                        //暂时啥事也先不用做
                    }
                )
            }
        }
    })
</script>

三、这里留一个项目实例

我个人跟着黑马程序员做的一个天气项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岑梓铭查天气</title>
    <!-- 导入vue类包 -->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <style>
    body,ul,h1,h2,h3,h4,h5,h6{
        margin: 0;
        padding: 0;
    }
    h1,h2,h3,h4,h5,h6{
        font-size:100%;
        font-weight:normal;
    }
    a{
        text-decoration:none;
    }
    ul{
        list-style:none;
    }
    img{
        border:0px;
    }

    /* 清除浮动，解决margin-top塌陷 */
    .clearfix:before,.clearfix:after{
        content:'';
        display:table;    
    }
    .clearfix:after{
        clear:both;
    }
    .clearfix{
        zoom:1;
    }

    .fl{
        float:left;
    }
    .fr{
        float:right;
    }
    body{
        font-family:'Microsoft YaHei';   
    }
    .wrap{
        position: fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:#fff;

    }
    .search_form{
        width:640px;
        margin:100px auto 0;
    }
    .logo img{
        display:block;
        margin:0 auto;
    }
    .form_group{
        width:640px;
        height:40px;
        margin-top:15px;
    }
    .input_txt{
        width:538px;
        height:38px;
        padding:0px;
        float:left;
        border:1px solid #41a1cb;
        outline:none;
        text-indent:10px;
    }

    .input_sub{
        width:100px;
        height:40px;
        border:0px;
        float: left;
        background-color: #41a1cb;
        color:#fff;
        font-size:16px;
        outline:none;
        cursor: pointer;
        position: relative;
    }
    .input_sub.loading::before{
        content:'';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url('./img/loading.gif');
    }

    .hotkey{
        margin:3px 0 0 2px;
    }

    .hotkey a{
        font-size:14px;
        color:#666;
        padding-right:15px;
    }
    .weather_list{
        height:200px;
        text-align:center;
        margin-top:50px;
        font-size:0px;
    }
    .weather_list li{
        display:inline-block;
        width:200px;
        height:200px;
        padding:0 10px;
        overflow: hidden;
        position: relative;
        background:url('./img/line.png') right center no-repeat;
        background-size: 1px 130px;
    }

    .weather_list li:last-child{
        background:none;
    }

    .info_date{
        width:100%;
        height:40px;
        line-height:40px;
        color:#999;
        font-size:14px;
        left:0px;    
        bottom:0px;    
        margin-top: 15px;
    }
    .info_date b{
        float: left;
        margin-left:15px;
    }

    .info_type span{
        color:#fda252;
        font-size:30px;
        line-height:80px;
    }
    .info_temp{
        font-size:14px;  
        color:#fda252;
    }
    .info_temp b{
        font-size:13px;
    }
    .tem .iconfont {
        font-size: 50px;
    }
    a:hover{
        cursor: pointer;
        color: #fda252;
        font-size: 16px;
    }
    </style>
</head>
<body>
    <div class="wrap" id="app">
    <div class="search_form">
      <div class="logo"><img src="./img/logo.jpg" alt="logo" /></div>
      <div class="form_group">
        <input type="text" @keyup.enter="searchWeather" v-model="city"  class="input_txt" placeholder="请输入查询的天气"/>
        <!-- 第1步：加上v-on或者@指令，让文本框按下回车、或者点击查询会有所反应 -->
        <!-- 第2部：加上v-model让文本框和vue的data信息双向流通，文本框输入什么，对应的“city”的值就改变 -->
        <button class="input_sub" @click="searchWeather">
          搜 索
        </button>
      </div>
      <div class="hotkey">
        <a @click="changeCity('北京')">北京</a>
        <a @click="changeCity('上海')">上海</a>
        <a @click="changeCity('广州')">广州</a>
        <a @click="changeCity('深圳')">深圳</a>
      </div>
    </div>
    <ul class="weather_list">
      <li v-for="i in dataArray">
            <div class="info_type">
                <span class="iconfont">{{ i.wea }}</span>
            </div>
            <div class="info_temp">
            <b></b>
            {{ i.win }} ~ {{ i.win_speed }}
            <b></b>
            </div>
            <div class="info_date">
                <span>{{ i.date }}</span>
            </div>
      </li>
    </ul>
  </div>




    <!-- 引入axios库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                //文本框输入的查询的城市信息
                city: "武汉",
                //服务器获取的资源数据，放到这个数组，再用上面<ul><li>数据</li><li>数据</li></ul>用v-for指令绑定
                dataArray: [],
                // hotCitys: ["北京", "上海", "广州", "深圳"]
            },
            methods: {
                searchWeather: function(){
                    //测试一下点击或者回车有没有反应
                    console.log('查询天气')
                    //以及测试在文本框输入东西，city的值是否有跟着改变
                    console.log(this.city)

                    //第3步：引入axios库
                    //第4步：这个天气接口网站有点问题，只能根据城市city参数来查询具体的城市天气信息，当然这也正是我们所需要的
                    //      那么我们就让网址后面“+”上city参数，字符串相加也还是字符串，正好动态生成接口服务器地址,或者用`${}`的方式
                    //      另外因为原来的API接口发癫，我自己注册了一个账户，可以免费查询500次

                    //因为.then()回调函数会改变this的指向，要用变量保存
                    let that = this

                    axios.get(`http://v1.yiketianqi.com/free/week?unescape=1&appid=26619621&appsecret=RgikNh3a&city=${this.city}`)
                    .then(
                        function(response){
                            //测试能否接通服务器，并根据我们输入的内容获取对应的信息
                            console.log(response.data.data)//测试成功之后，我们下一步就应该把这些【数据】渲染到【DOM元素】也就是页面上
                                                           //但是怎么渲染到页面上呢？那就要用v-for循环指令，把数据遍历渲染到<ul><li>数据</li><li>数据</li></ul>上
                                                           //但是要用v-for,必然要绑定好是哪一个数组，那么就要在data创建一个数组，保存我们服务器获取到的数据
                            that.dataArray = response.data.data
                        },
                        function(err){
                            console.log(err)
                        }
                    )
                },
                changeCity: function(city){
                    this.city = city
                    this.searchWeather()
                }
            }
        })
    </script>    
</body>
</html>