使用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. Unity JobSystem使用及技巧

    什么是JobSystem 并行编程 在游戏开发过程中我们经常会遇到要处理大量数据计算的需求,因此为了充分发挥硬件的多核性能,我们会需要用到并行编程,多线程编程也是并行编程的一种. 线程是在进程内的,是 ...

  2. Docke的使用与详解2 --RabbitMQ安装与使用

    一.RabbitMQ安装与使用 1.RabbitMQ安装 --RabbbitMQ官网 1>使用docker pull rabbitmq拉取镜像,默认拉取最新版本: 这时你会想,我要拉取指定版本该 ...

  3. DFS总结

    常见剪枝方法 优化搜索顺序 优先搜索决策树较小的点,例如在165. 小猫爬山一题中,优先搜索体重较大的扩展出的情况较少 排除冗余信息 如果某些情况在此前已经被搜索过了,那么无需继续搜索 可行性剪枝 如 ...

  4. linux服务器qps查询,查看当前linux服务器的QPS

    https://blog.csdn.net/weixin_42119281/article/details/116595205 QPS:每秒查询率(QPS,Queries-per-second)是对一 ...

  5. python协程详细解释以及例子

    目录 1.协程 1.1greenlet实现协程 1.2yield关键字实现协程 1.3使用asyncio模块实现协程 1.4async & await关键字实现协程 2.协程意义 3.异步编程 ...

  6. MATLAB计算变异函数并绘制经验半方差图

      本文介绍基于MATLAB求取空间数据的变异函数,并绘制经验半方差图的方法.   由于本文所用的数据并不是我的,因此遗憾不能将数据一并展示给大家:但是依据本篇博客的思想与对代码的详细解释,大家用自己 ...

  7. Mybatis中批量插入和一些问题的解决

    批量插入有三个问题,第一是执行效率,第二数据冲突,第三数据重跑更新操作. 一般对于这样的问题有以下操作方法. 第一是执行效率:mybatis支持两种高效插入. 1.mybtis的foreach标签,f ...

  8. 【Git GitHub Idea集成】

    1 Git介绍 分布式版本控制工具 VS 集中式版本控制工具 git是一个免费开源的分布式版本控制系统,可以快速高效地处理从小型到中型的各种项目. 1.1 Git进行版本控制 集中式版本控制工具:如C ...

  9. [人脸活体检测] 论文：Face De-Spoofing: Anti-Spoofing via Noise Modeling

    Face De-Spoofing: Anti-Spoofing via Noise Modeling 论文简介 将非活体人脸图看成是加了噪声后失真的x,用残差的思路检测该噪声从而完成分类. 文章引用量 ...

  10. Python-趣味小程序

    1.效果 2.代码 import sys import time def print_act(word): #print('\n'+' '+'\r') #让光标回到行首 sys.stdout.writ ...