使用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. 53.cin、cin.get()、cin.getline()、getline()、gets()等函数的用法

    1.cin 用法1:最基本,也是最常用的用法,输入一个数字: #pragma warning(disable:4996) #define _CRT_SECURE_NO_WARNINGS 1 #incl ...

  2. Navicate 远程连接Mysql数据库

    123步骤是在服务器上运行,第四步是在本机的navicate上运行 1.use mysql 2.update user set host = '%' where user = 'root' 3.flu ...

  3. SpringBoot——日志及原理

    一.SpringBoot日志 选用 SLF4j(接口)和 logback(实现类),除了上述日志框架,市场上还存在 JUL(java.util.logging).JCL(Apache Commons ...

  4. MyBatis 分页（前后端插件）实现

    一.后端使用 PageHelper插件 [1]引入 PageHelper jar包(Maven项目) 1 <dependency> 2 <groupId>com.github. ...

  5. 为自己的博客添加2D虚拟人物

    2020-05-29 在自己申请完并获得了属于自己的博客后,我突然想着为自己的博客添砖加瓦,记起了之前看别人博客时,其充满独具个性,特立独行的风格,让我十分羡慕,最近看到了一个博客风格很有趣,其有趣之 ...

  6. 剑指offer 第18天

    第 18 天 搜索与回溯算法(中等) 剑指 Offer 55 - I. 二叉树的深度 输入一棵二叉树的根节点,求该树的深度.从根节点到叶节点依次经过的节点(含根.叶节点)形成树的一条路径,最长路径的长 ...

  7. js面试题学习整理

    1. 异步操作有哪些? 回调函数,事件监听,promise,ajax,async,setTimeout,Generator 2. Promise是什么? Promise是异步编程的一种解决方案. 从语 ...

  8. 如何在 SpringBoot 项目中接入 ChartGPT

    大家好,我是公子骏.最近体验了火爆全网的 ChartGPT,深刻体会了其强大的能力,这让我们程序猿对AI的未来突然有了广大的畅想空间. 我也在网上看到不少大牛通过 ChartGPT 来获取收益,就寻思 ...

  9. 介绍箭头函数的 this

    由于箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值 1. 所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数 ...

  10. Django笔记二十七之数据库函数之文本函数

    本文首发于公众号:Hunter后端 原文链接:Django笔记二十七之数据库函数之文本函数 这篇笔记将介绍如何使用数据库函数里的文本函数. 顾名思义,文本函数,就是针对文本字段进行操作的函数,如下是目 ...