使用Axios实现异步通信需要先导入cdn：

<script src="https://unpkg.com/axios@1.4.0/dist/axios.min.js"></script>

使用到的数据data.json

{

  "name":"kuang" ,

          "url":"https://www.bilibili.com/?spm_id_from=333.788.0.0",

  "page": 1,

  "isNonProfit": true,

  "address": {

    "stress": "寒光",

    "city": "西安",

    "country": "中国"

  },

  "links": [

{

  "name": "bilbil",

  "url": "https://ss"

},

{

"name": "bilbil",

"url": "https://ss"

},

{

"name": "badu",

"url": "https://baidu"

}

    ]

  }
对axios异步通信的理解：先展示文本数据，再动态加载数据，二者不同步。
<!--   
例如如果网络卡顿会先展示纯文本
“{{info.name}}
{{info.address.stress}}
点我”
然后在接收到数据后自动加载(无需刷新网页)json格式数据中键的值
     -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="vue" v-clock>

<!--    axios实现异步通信：

例如如果网络卡顿会先展示纯文本

{{info.name}}

{{info.address.stress}}

点我

然后在接收到数据后自动加载(无需刷新网页)json格式数据中键的值

       -->

    <div>{{info.name}}</div>

    <div>{{info.address.stress}}</div>

    <a v-bind:href="info.url">点我</a>

</div>

<script src="https://unpkg.com/axios@1.4.0/dist/axios.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script type="text/javascript">

    var vm=new Vue({

        el:"#vue",

        data(){

          return{

              info:{

                  name:null,

                  address:{

                      stress:null,

                      city:null,

                      country:null

                  },

                  url:null

              }

          }

        },

        mounted(){//钩子函数

            axios.get('../data.json').then(response=>(this.info=response.data));

        }

    });

</script>

</body>

</html>

最终在浏览器展示的结果：

总结：异步通信axios，与ajax类似，通过先在网页放置文本格式数据，再动态加载出数值格式数据，无需刷新网页

Vue 异步通信Axios的更多相关文章

  1. vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题

    vue 集成axios之后,发送的post请求默认为payload 方式. 如果想改为正常的方式,需要增加headers头,并且将发送是数据json格式改为 querystring的方式. 安装依赖 ...

  2. Vue框架axios请求（类似于ajax请求）

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

  3. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  4. vue 中axios 的基本配置和基本概念

    axios的基本概念及安装配置方法   ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 a ...

  5. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  6. vue中axios的安装和使用

    有很多时候你在构建应用时需要访问一个 API 并展示其数据.做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种. 安装包:如果没有安装cnpm ...

  7. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  8. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy（更新）

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  9. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  10. 基于vue配置axios

    转载地址:https://juejin.im/post/5a02a898f265da43052e0c85 1.背景 在项目开发中ajax请求是必不可缺少 一部分ajax请求不需要loading或则请求 ...

随机推荐

  1. 【LeetCode贪心#09】用最少数量的箭引爆气球（涉及区间重叠情况判断）

    用最少数量的箭引爆气球 力扣题目链接(opens new window) 在二维空间中有许多球形的气球.对于每个气球,提供的输入是水平方向上,气球直径的开始和结束坐标.由于它是水平的,所以纵坐标并不重 ...

  2. 为什么要用Redis压缩表，是快吗？

    首先需要了解什么是压缩表,推荐Redis设计与实现第二版:压缩列表_w3cschool 为什么要用压缩表呢?是快吗? 其实不是的,恰恰相反,ziplist 是为了节省内存而设计出来的一种数据结构.zi ...

  3. $\mathcal{2023WinterHoliday}$刷题总结

    \(\mathcal{2023WinterHoliday}\) \(\mathcal{CTF}\) \(\mathcal{web}\) 1.\(json格式:\)$json['x']=="w ...

  4. 使用vSphere Update Manager 升级 ESXi 主机

    使用vSphere Update Manager 升级 ESXi 主机 vSphere Update Manager  vSphere Update Manager 是用于升级.迁移.更新和修补群集主 ...

  5. Git链接上游仓库

    技术背景 在Git的操作过程中,一般的组织内部工作模式可以在同一个仓库上的master-develop-feature不同分支上进行开发,也有一些人和外部协作者会通过Fork到自己本地的仓库进行更新的 ...

  6. PVE开启硬件显卡直通功能

    首先编辑GRUB配置文件: root@pve:~# vim /etc/default/grub root@pve:~# root@pve:~# cat /etc/default/grub # If y ...

  7. .NET中使用Redis总结——2.项目实战

    接上篇.NET中使用Redis总结 -- 1.Redis搭建 看一些Redis相关资料,.NET 方面ServiceStack.Redis 用的比较多,就直接拿来用了. 在使用过程中经常过出现假死状态 ...

  8. python：生成半年内的巡检日报execl

    问题描述:使用脚本来生成半年内的数据,数据内容大概为每天的数据库巡检日报,临时抱佛脚.数据不可能是真实的,都是随机生成的,想要使用真实的数据后面直连操作系统或者数据库.后期可以慢慢实现自动化生成每天的 ...

  9. oracle数据对比--用户,索引,分区,dblink,同义词,视图

    问题描述:需要对比用户数据一般在数据库迁移之后,需要对比一下两个库之间的差距,如果登上去一条命令的执行,去统计,就会比较麻烦,这里整理了一些脚本可用.通过创建dblink的方式快速查询,也可以整合到一 ...

  10. python移动同名文件

    import os import shutil def split_name(file): file_name, _ = file.split('.') return file_name def mo ...