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. R语言- 实验报告 - 利用R语言脚本与Java相互调用

    一. 实训内容 利用R语言对Java项目程序进行调用,本实验包括利用R语言对java的.java文件进行编译和执行输出. 在Java中调用R语言程序.本实验通过eclipse编写Java程序的方式,调 ...

  2. TreeMap 原理

    基于jdk1.8 TreeMap第一个想到的就是有序,当然也不是线程安全 TreeMap实现NavigableMap接口,说明支持一系列的导航方法 一.构造方法 public TreeMap() { ...

  3. torch_10_stackGAN-V2

    核心要点 StackGAN旨在生成高分辨率的真实图片. stackGAN-v1架构包含两个阶段:用于文本到图像的合成,阶段1GAN根据给定的文本描述绘制对象的形状和颜色,生成低分辨率图像.阶段2将阶段 ...

  4. [KMP]一本通(http://ybt.ssoier.cn:8088) 1698:字符串匹配

    字符串匹配 [题目描述] 对于一个字符集大小为C的字符串pp,可以将任意两个字符在p中的位置进行互换,例如p=12321,交换1.21.2得到21312,交换1.4得到42324,交换可以进行任意次. ...

  5. MySQL for OPS 08：MHA 高可用

    写在前面的话 主从架构在一般情况下只能满足我们小公司业务并非一刻都不能中断服务.但是对于大型公司而言,对然数据丢失,数据库挂了,我们可以通过技术找回,修复.但是其中修复过程所消耗的时间是不被允许的.此 ...

  6. CentOS 配置阿里云 yum 源

    CentOS 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的Cent ...

  7. yii2.0的学习之旅（一）

    一. 通过composer安装yii2.0项目 *本文是根据您已经安装了composer (1)跳转到项目根目录 cd /xxxx/www (2)下载插件 composer global requir ...

  8. Winform 通过 WebBrowser 与 JS 交互

    Winform 通过 WebBrowser 与 JS 交互 魏刘宏 2019.08.17 之前在使用 Cef (可在 Winform 或 WPF 程序中嵌入 Chrome 内核的网页浏览器的组件)时, ...

  9. 百度编辑器UEditor,保存图片的配置问题

    前言: 在使用百度编辑器UEditor的时候,如何将图片保存到服务器,我刚开始以为是要自己写上传文件的方法,后来发现只需要配置一下即可,如果你也正在使用百度富文本编辑器UEditor的话,这篇文章将非 ...

  10. 前端开发HTML5——表单标签

    表单简介 Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用.form通常由一到多个表单元素组成,这些表单元素是单行/多行 ...