网络应用：axios基本使用、axios+vue使用案例和源代码

最新推荐文章于 2024-05-30 11:30:53 发布

曹莓奶昔

最新推荐文章于 2024-05-30 11:30:53 发布

阅读量707

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_49555741/article/details/124761909

版权

Vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.axios 基础使用

2. axios+vue

3. 天知道案例

1.axios 基础使用

功能强大的网络请求库

导包：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

语法：

axios.get(地址).then(function(response){},function(err){})

axios.post(地址).then(function(response){},function(err){})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 官网提供axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>axios</title>
</head>

<body>
    <button class="get">get请求</button>
    <button class="post">post请求</button>
    <script>
        /*
                接口1:随机笑话
                请求地址:https://autumnfish.cn/api/joke/list
                请求方法:get
                请求参数:num(笑话条数,数字)
                响应内容:随机笑话
            */
        document.querySelector(".get").onclick = function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=2")
                .then(function (response) {
                    console.log(response);
                }, function () {
                    console.log(err);
                })
        }
        /*
              接口2:用户注册
              请求地址:https://autumnfish.cn/api/user/reg
              请求方法:post
              请求参数:username(用户名,字符串)
              响应内容:注册成功或失败
          */
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg", { username: "lisa" })
                .then(function (response) {
                    console.log(response);
                }, function () {
                    console.log(err);
                })
        }

    </script>
</body>

</html>

效果：点击按钮可以在控制台获取到信息

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

学习网站：GitHub - axios/axios: Promise based HTTP client for the browser and node.js

2. axios+vue

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 官网提供axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- vue开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>axios+vue</title>
</head>

<body>
    <div id="app">
        <button @click="getJoke">获取笑话</button>
        <p> {{joke}} </p>
    </div>
    <script>
        /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑
        */
        var app = new Vue({
            el: "#app",
            data: {
                joke: "一个很好笑的笑话"
            },
            methods: {
                getJoke: function () {
                    var that = this;
                    // console.log(this.joke); //一个很好笑的笑话
                    axios.get("https://autumnfish.cn/api/joke").then(
                        function (response) {
                            // console.log(response);
                            console.log(response.data);
                            // console.log(this.joke) //其他笑话
                            that.joke = response.data;
                        }, function (err) {

                        }
                    )
                }
            },

        })

    </script>
</body>

</html>

效果：点击按钮，获取了data里面的joke方法的数据

3. 天知道案例

功能：

按回车（v-on.enter）,查询数据（axio接口model），渲染数据（v-for数组 that）

回车查询：

引用的逻辑代码建议和页面分离，单独使用js文件编写

axios回调函数中this指向改变，需要额外的保存一份

服务器返回的数据比较复杂时，获取的时候需要注意层级结构

点击查询：

自定义参数可以让代码的复用性更高

methods中定义的方法内部，可以通过this关键字点出其他的方法

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天知道</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/index.css" />

</head>

<body>
    <div class="wrap" id="app">
        <div class="search_form">
            <div class="logo"><img src="images/logo.png" alt="logo" /></div>
            <div class="form_group">
                <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt"
                    placeholder="请输入查询的天气" /> <button class="input_sub">
                    搜 索
                </button>
            </div>
            <div class="hotkey">
                <a href="javascript:;" @click="changeCity('北京')">北京</a>
                <a href="javascript:;" @click="changeCity('上海')">上海</a>
                <a href="javascript:;" @click="changeCity('广州')">广州</a>
                <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
            </div>
        </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/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 自己的js -->
    <script src="./js/main.js"></script>
</body>

</html>

js代码

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

  1. 点击回车
  2. 查询数据
  3. 渲染数据
  */
var app = new Vue({
    el: "#app",
    data: {
        city: '',
        weatherList: [],
    },
    methods: {
        // 回车查询
        searchWeather: function () {
            // console.log('天气查询');  测试是否查询到数据
            // console.log(this.city);  测试是否查询到数据
            // 调用接口 axios.get('').then().catch()
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                .then(function (response) {
                    // console.log(response.data.data.forecast);
                    that.weatherList = response.data.data.forecast
                })
                .catch(function (arr) { })
        },
        // 点击查询
        changeCity: function (city) {
            this.city = city;
            this.searchWeather();
        },
    },
})

效果

曹莓奶昔

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网络应用：axios基本使用、axios+vue使用案例和源代码

目录1.axios 基础使用2. axios+vue1.axios 基础使用功能强大的网络请求库导包：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>语法：axios.get(地址).then(function(response){},function(err){})axios.post(地址).then(function(response){},fu...
复制链接

扫一扫