vue入门笔记-06-Axios异步通信(含解决Vue闪烁问题)

学习笔记

发布日期: 2020-08-09

更新日期: 2021-01-12

文章字数: 505

阅读时长: 2 分

阅读次数:

Axios异步通信.

1、什么是Axios.

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

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

http://www.axios-js.com/

2、为什么要使用Axios.

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

3、第一个Axios应用程序.

在线CDN

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

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
    <!-- 解决闪烁问题：当网速很慢时，加载页面，会先显示模板{{name}}，再用vm的数据替换 -->
    <!-- 用白屏代替模板 -->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-clock>
    <h1>{{info.name}}</h1>
    <h1>{{info.address.city}}</h1>
    <h1><a v-bind:href="info.url">url</a></h1>
</div>
<script>

   var vm = new Vue({
       el: "#app",
       data(){
           return {
              info:{
                  name:null,
                  url:null,
                  address:{
                      street:null,
                      city:null,
                      country:null
                  }
              }
           }
       },
       mounted(){// 钩子函数
           axios.get("data.json").then(resource=>(this.info = resource.data));
       }
   });


</script>
</body>
</html>

data.json

{
  "name":"狂神说java",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}