1.什么是Axios

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

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

GitHub：https://github.com/axios/axios

中文文档：http://www.axios-js.com/

2.为什么要使用Axios

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

3.第一个Axios应用程序

1.模拟JSON数据：创建data.json

 {

   "name": "第一个Axios程序",

   "url": "https://www.cnblogs.com/zhihaospace/p/12078861.html",

   "page": 1,

   "isNonProfit": true,

   "address": {

     "street": "包河",

     "city": "安徽",

     "country": "中国"

   },

   "links": [

     {

       "name": "海恋天",

       "url": "https://www.cnblogs.com/zhihaospace/"

     },

     {

       "name": "Vue的组件",

       "url": "https://www.cnblogs.com/zhihaospace/p/12078835.html"

     },

     {

       "name": "Vue的双向绑定",

       "url": "https://www.cnblogs.com/zhihaospace/p/12078708.html"

     }

   ]

 }

2.导入axios.js

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

3.代码

说明：

  • data函数：与data属性不同，返回数据给视图。注意：data函数返回的数据结构必须要和Ajax响应回来的数据格式相匹配，也就是名字相同
  • mounted函数：钩子函数
  • axios：使用axios框架的get方法请求AJAX并自动将数据封装进Vue实例的数据对象中
  • v-cloak：让渲染时显示模版改为显示空白页面，解决页面闪烁问题
  • v-text：本身没有闪烁问题
 <!DOCTYPE html>

 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <!--v-cloak 解决闪烁问题-->

     <style>

         [v-cloak] {

             display: none;

         }

     </style>

 </head>

 <body>

 <!--view层模块-->

 <div id="vue">

     <!--默认v-text 是没有闪烁问题的，会覆盖标签的元素中原本的内容，插值表达式只会替换占位符的内容，不会覆盖原来的内容-->

     <div v-text="info.url"></div>

     <!--v-cloak：防止闪烁-->

     <div v-cloak>名称：{{info.name}}</div>

     <div v-cloak>地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>

     <div v-cloak>链接：<a v-bind:href="info.url" target="_blank" v-cloak>{{info.url}}</a></div>

 </div>

 <!--导入Vue.js-->

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

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

 <script type="text/javascript">

     //定义一个Vue组件

     Vue.component("first_component", {

         props: ["com"],

         template: "<li>{{com}}</li>"

     })

     let vm = new Vue({

         el: '#vue',

         //此处是data函数和data属性不同

         data() {

             return {

                 info: {

                     name: null,

                     address: {

                         country: null,

                         city: null,

                         street: null

                     },

                     url: null

                 }

             }

         },

         mounted() { //钩子函数，链式编程，ES6的lambda

             axios

                 .get('../data.json')

                 .then(response => (this.info = response.data));

         }

     });

 </script>

 </body>

 </html>

4.Vue的生命周期

  • 官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
  • Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。
  • 在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

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

  1. 解决vue跨域axios异步通信

    在项目中,常常需要从后端获取数据内容.特别是在前后端分离的时候,前端进行了工程化部署,跨域请求成了一个前端必备的技能点.好在解决方案很多. 在vue中,在开发中,当前使用较多的是axios进行跨域请求 ...

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

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

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

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

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

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

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

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

  6. Vue用axios跨域访问数据

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

  7. vue中axios的安装和使用

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

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

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

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

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

随机推荐

  1. 分布式共识算法 (四) BTF算法（区块链使用）

    系列目录 分布式共识算法 (一) 背景 分布式共识算法 (二) Paxos算法 分布式共识算法 (三) Raft算法 分布式共识算法 (四) BTF算法 一.引子 前面介绍的算法,无论是 Paxos ...

  2. 洛谷P4015 运输问题 网络流24题

    看了下SPFA题解,一个一个太麻烦了,另一个写的很不清楚,而且注释都变成了"????"不知道怎么过的,于是自己来一发SPFA算法. Part 1.题意 M 个仓库,卖给 N 个商店 ...

  3. finalize()方法什么时候被调用？析构函数(finalization)的目的是什么？

    链接:https://www.nowcoder.com/questionTerminal/d8eab06913084e42b515633604eef7cd?pos=28&mutiTagIds= ...

  4. 解惑：如何使得寝室的电脑和实验室的电脑远程相互访问（Linux和Windows）

    解惑:如何使得寝室的电脑和实验室的电脑远程相互访问 一.前言 自从接触计算机网络之后就一直想着把实验室的电脑和自己寝室的电脑远程连接起来,结果总是郁郁不能成功,网上这样的教材也少的可怜,于是总是搁置下 ...

  5. 记一次SQL调优

    insert优化 如果你在某一时刻有大量的insert操作,一条一条插入是非常耗时的.insert语句本身支持一次插入很多条记录,插入记录数上限受sql语句长度限制,一般一次插个几千条是没问题的.在我 ...

  6. （四十二）golang--协程之间通信的方式

    假设我们现在有这么一个需求: 计算1-200之间各个数的阶乘,并将每个结果保存在mao中,最终显示出来,要求使用goroutime. 分析: (1)使用goroutime完成,效率高,但是会出现并发/ ...

  7. 将Excel表格数据转换成Datatable

    /// <summary> /// 将Excel表格数据转换成Datatable /// </summary> /// <param name="fileUrl ...

  8. （转）dnSpy 强大的.Net反编译软件

    目录 1. Debug外部引用的Dll文件2. 调试应用程序3. 修改exe文件的内容 作者:D.泡沫 一说起.net的反编译软件,大家首先想到的就是Reflector,ILSpy,dotPeek等等 ...

  9. 车位iou计算

    车位检测中,判断多帧图像检测出的车位是否是同一个车位.计算其IOU. 判断一个点是否在一个四边形内 Approach : Let the coordinates of four corners be ...

  10. 一款常用的截图工具（能够截gif动图）

    这款工具用来截程序的演示GIF图片,灰常方便. 直接上Github地址: https://github.com/NickeManarin/ScreenToGif