axios基础学习——通过 Vue + axios 获取接口数据的小demo_axios获取后端数据

2401_84617431

于 2024-05-15 20:02:08 发布

阅读量303

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84617431/article/details/138921576

版权

程序员专栏收录该内容

105 篇文章 0 订阅

订阅专栏

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用 npm安装:
$ npm install axios
使用 cnpm安装:
$ cnpm install axios
使用 yarn安装:
$ yarn add axios
🧩axios请求方法

**get：**获取数据
**post：**提交数据(表单提交 + 文件上传，一般用于提交数据，如上传图片或上传 Excel 文件等)。
**put：**更新数据(所有数据推送到后端)。
**patch：**更新数据(只将修改的数据推送到后端)
**delete：**删除数据
这5个请求方法都是由后端定义的，也就是说，因为请求的接口都是请求到后端，然后由后端去操作数据库，把数据进行存储、修改和删除，所以具体的请求方法都是由后端来确定的。
具体就不介绍每个方法的使用案例了

🧩axios的使用方法（以get为例子）

方法一
axios.get("url").then(function (res) {
    console.log(res);
    }),
function (err) {
    console.log(err);
    }
方法二
axios({
     method: "get",
     url: "url"
}).then(res => {
     console.log(res);
}), (err) => console.log(err)

🎯demo介绍

布局和样式就是一个按钮加一个显示文字的区域，这不是重点，重点通过axios获取到数据。
功能就是点击按钮后，通过axios获取到数据，然后显示在方框中。
使用的接口如下：

🎯完整代码

<!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>Document</title>
</head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
</style>

<body>
    <div id="app">
        <input type="button" @click="getJoke" value="点击获取笑话数据">
        <div style="width: 400px;height: 400px; border: 1px solid; overflow: auto;">{{joke}}</div>
    </div>
</body>
<!-- 通过CDN链接axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //vue2写法
    // var app =new Vue({
    //     el:'#app',
    //     data:{

    //     },
    //     methods:{

    //     }
    // }).mount('#app');
    const {
        createApp
    } = Vue
    createApp({
        data() {
            return {
                joke: "通过axios获取笑话"
            }
        },
        methods: {
            getJoke: function () {
                //axios获取后端接口数据方法一
                // console.log(this.joke);
                var that = this
                axios.get("https://autumnfish.cn/api/joke").then(
                        function (res) {
                            console.log(res.data);
                            // console.log(that.joke);
                            that.joke = res.data
                        }),
                    function (err) {
                        console.log(err);
                    }

                //axios获取后端接口数据方法二
                // axios({
                //     method: "get",
                //     url: "https://autumnfish.cn/api/joke"
                // }).then(res => {
                //     console.log(res);
                // }), (err) => console.log(err)
            }
        },
    }).mount('#app')
</script>

</html>

🎯实现效果

🎯案例分析

按钮通过v-on绑定一个点击事件，点击之后执行axios.get这个方法。
文字区域通过v-model实现数据双向绑定，把通过axios获取到的数据显示在上面。
这里要注意var that = this这段代码，在axios回调函数中的this已经改变无法访问到data中数据，因此通过var that = this这段代码把this保存起来，然后回调函数中直接使用保存的this即可。

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中…(img-0eGK9nmb-1715774505252)]

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84617431

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
axios基础学习——通过 Vue + axios 获取接口数据的小demo_axios获取后端数据

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
复制链接

扫一扫