zoukankan      html  css  js  c++  java
  • 4、Axios异步通信

    Axios异步通信

    什么是Axios

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

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

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

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

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

    为什么要使用 Axios

      由于 Vue.js 是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC (关注度分离原则),所以 Vue.js 并不包含 AJAX 的通信功能,为了解决通信问题

      作者单独开发了一个名为 vue-resource的插件,不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios框架。少用jQuery,因为它操作Dom太频繁

    第一个 Axios 应用程序

      咱们开发的接口大部分都是采用 JSON 格式,可以先在项目里模拟一段 JSON 数据,数据内容如下:创建一个名为 data.json 的文件并填入上面的内容,放在项目的根目录下:

    {
      "name": "zhixi的博客",
      "url": "https://www.cnblogs.com/zhangzhixi",
      "page": 1,
      "isNonProfit": true,
      "address": {
        "street": "单台村",
        "city": "河南信阳",
        "country": "中国"
      }
    }

      测试代码:

    <!DOCTYPE html>
    <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <!--引入 JS 文件-->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        <title>Axios</title>
        <!--v-cloak 解决闪烁问题-->
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
    
    <div id="vue" v-cloak>
        <div>名称:{{info.name}}</div>
        <div>地址:{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>
        <div>链接:<a v-bind:href="info.url" target="_blank">{{info.url}}</a></div>
    </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue',
            // data函数
            data() {
                return {
                    info: {
                        name: null,
                        address: {
                            country: null,
                            city: null,
                            street: null
                        },
                        url: null
                    }
                }
            },
            mounted() { //钩子函数
                axios
                    .get('../data.json')
                    .then(response => (this.info = response.data));
            }
        });
    </script>
    
    </body>
    </html>

    说明:

    1. 在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
    2. 使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
    3. 我们在data中的数据结构必须要和Ajax响应回来的数据格式匹配!

    Vue的生命周期

    官方文档:https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

    Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。

    在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 JS 方法,可以让我们用自己注册的 JS 方法控制整个大局,在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

  • 相关阅读:
    Windows Azure Cloud Service (14) 使用Windows Azure诊断收集日志记录数据
    Windows Azure Cloud Service (13) 用Visual Studio 2010 将应用程序部署到Windows Azure平台
    Windows Azure Cloud Service (15) 多个VM Instance场景下如何处理ASP.NET Session
    Windows Azure Storage (5) Windows Azure Drive
    Windows Azure Storage (7) 使用工具管理Windows Azure Storage
    SQL Azure(二) SQL Azure vs SQL Server
    webbrowser的自动提交
    提取视频的背景声音的软件
    Listview列排序的bug原因
    两个奇怪的问题
  • 原文地址:https://www.cnblogs.com/zhangzhixi/p/14302441.html
Copyright © 2011-2022 走看看