Vue2 04 Axios 异步通讯

4.1 Axios 异步通讯

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，它的主要作用就是实现AJAX异步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests
从 Node.js 创建 http 请求
支持 Promise API 【JS 中链式编程】
拦截请求和响应
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF （跨站请求伪造）

想使用 Axios 必须先调节对 ES6 的支持。
在这里插入图片描述

在这里插入图片描述

从上述图不难看出，数据的双向绑定，其实跟 Mounted 脱不开关系，要是没有人家。是无法实现的。当然没有虚拟dom 也不行。

mounted() 是在 Mounted 之前执行的，并且它只能执行一次，那么我们就可以在这里发送异步请求，初始化一些我们需要的数据。我们可以选择 Axios。

为什么要使用 Axios

由于 Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过进入 2.0 版本后，就停止了对该从插件的维护，并且还推荐使用 Axios 框架。。少用 jQuery。因为 jQuery 操作DOM 太频繁。

{
  "name":"mqy",
  "url": "http://ckacm.muquanyu.top/",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "平东街道",
    "city":"吉林四平",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在这里插入图片描述

axios.get(请求的url).then(Response => {Response.data})

当然可以直接请求一个资源，比如说 json 文件。也是可以的。返回的这个 data，如果是 JSON 的话，它会自动解析为 js 对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*解决 加载过慢 {{msg}} 的问题，它会在没加载出来之前 什么都不显示*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="vue" v-cloak>
    {{info.name}}
    <a v-bind:href="info.url">点我</a>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
<script>
    let vm = new Vue({
        el: "#vue",
        data(){
            return {
                info: {}
            }
        },
        // data: {
        //     info:{}
        // },
        mounted(){ // 钩子函数 链式编程
            axios.get('data.json').then(Response => {this.info = Response.data})
        }
    });
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

在这里插入图片描述

4.2 jQuery AJAX 也可以

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*解决 加载过慢 {{msg}} 的问题，它会在没加载出来之前 什么都不显示*/
        [v-cloak] {
            display: none;
        }
    style>
head>
<body>

<div id="vue" v-cloak>
    {{info.name}}
    <a v-bind:href="info.url">点我a>
div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
<script>
    let vm = new Vue({
        el: "#vue",
        data(){
            return {
                info: {}
            }
        },
        // data: {
        //     info:{}
        // },
        mounted(){ // 钩子函数 链式编程
            $.get({
                url: "data.json",
                success: (res) => {
                    this.info = res;
                }
            })
        }
    });
script>
body>![在这里插入图片描述](https://img-blog.csdnimg.cn/f897d1610d9f4f938ec6f54fe6ee0f26.png)

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

相关阅读:
Python拆分列中文和字符
 高等代数复习：同构定理
 【Pytorch with fastai】第 15 章：深入探讨应用程序架构
 《熟悉List集合》第一弹
 UDS（83服务-AccessTimingParameter）
YOLOv8-Seg改进：位置信息的轴线压缩增强注意力Sea_Attention| ICLR2023 SeaFormer，轻量级语义分割算法，复旦大学和腾讯
 centos下安装nginx
Cannon.js -- 3d物理引擎
 多模态信息抽取（二）——多模态预训练模型综述（上）
数据结构与算法(六) 贪心算法
原文地址：https://blog.csdn.net/qq_52606908/article/details/126026518