使用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. DNS BIND之dnssec安全

    公司一大早域名解析出问题了,网抓项目都无法抓取到进销存数据. 查询后发现是运维周末重启了dns服务. 网上找到的解决方法: 在BIND的配置文件(/etc/named.conf)中打开DNSSEC选项 ...

  2. 《程序员的自我修养》学习笔记——ELF 文件结构介绍【第二弹】

    ELF 文件结构介绍 文件头 以 ELF 文件64位版本为例: e_ident [ELF魔数 16byte] 1-4字节:ELF 文件都必须相同的标识码,分别为 0x7F,0x45,0x4C,0x46 ...

  3. 记录一次重置数据库root用户的过程

    服务器的mysql突然连接不上去了,密码也忘记了.只能重新设置密码了 1.使用如下指令打开mysql数据库配置文件(具体的文件路径以实际情况为准) vim /etc/my.cnf在虚拟机中直接输入即可 ...

  4. 分库分表ShardingJDBC最佳实践

    1 添加依赖 <dependency> <groupId>org.apache.shardingsphere</groupId> <artifactId> ...

  5. salesforce零基础学习（一百二十五）零基础学习SF路径

    本篇参考: https://boulder-bard-27f.notion.site/Salesforce-Learning-e990864695674f07b99a5f8955770bd4 本篇背景 ...

  6. 杂谈--User Story

    本篇用于给自己后续慢慢看,对敏捷感兴趣的小伙伴,可以自行去看官方文档或者各种网站的视频讲解,更详细. 对于敏捷开发来说,User Story是开发的基础,把原本需求拆成最小粒度的Story,以方便拆分 ...

  7. l洛谷第二题

    题目描述 给定一个 n\times nn×n 的正方形棋盘,几位玩家在上面玩三子棋. 三子棋的规则是每位玩家轮流写下一个字母,同一名玩家的字母相同.当有一名玩家在行.列或者斜线上连续组成了 33 个自 ...

  8. arc076f F - Exhausted?

    ARC076 F - Exhausted? [题目大意] \(有m个座位,分别位于坐标为1,2,3,...,m的地方:n个客人,第i位客人只坐位于[0,li]∪[ri,m]的座位.每个座位只能坐一个人 ...

  9. mysql迁移：mysqldump导出表结构及数据

    问题描述:有需要mysql某几张表的需求,某个数据库某几张表,导出先检查相应的数据库和表是否存在 数据泵用法:默认导出的是表结构以及表中的数据 mysqldump -uroot -p -S /data ...

  10. React课堂笔记1

    一.概要 React是用于构建用户界面的MVVM框架. React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它.认为它可能是将来Web开发的主流工具之一. 官网:https://z ...