Axios异步通信

Axios异步通信

6.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/

6.2、为什么要使用Axios

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

6.3、第一的Axios应用程序

在线的Axios

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

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

创建一个json格式的文件

{
  "name": "狂神说Java",
  "url": "https//blog.kuangstudy.com",
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "狂神说Java",
      "url": "https//blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        [v-clock]{
            display: none;
        }
    style>
head>
<body>
<div id="vue" v-clock>
    <div>{{info.name}}div>
    <div>{{info.address.street}}div>
    <a v-bind:href="info.url">点我a>
div>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#vue",
        //data:属性:vm
        data(){
            return{
                //请求的返回格式,必须和json字符串一样
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },
        mounted(){//钩子函数 链式编程 Es6新特性
            axios.get("../../data.json").then(response=>{this.info=response.data});
        }
    });
script>
body>

解决闪烁问题

 

你可能感兴趣的:(VUE,javascript,ajax,前端,vue)