vue05-Axios异步通信

敏姐儿

已于 2022-01-21 12:49:57 修改

阅读量302

点赞数

分类专栏： VUE 文章标签：前端 vue

于 2022-01-21 12:49:26 首次发布

本文链接：https://blog.csdn.net/weixin_46128463/article/details/122594134

版权

VUE 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Axios异步通信

什么是Axios
vue 生命周期
代码实例
- json文件
- 实例代码

什么是Axios

Axios 是一个开源的可以用在浏览器和Node.js的异步通信框架，它的主要作用就是实现异步通信，其功能如下：

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

为什么要使用Axios

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

vue 生命周期

vue有一个完整的生命周期，也就是从开始创建，初始化数据，编译模版，挂载Dom，渲染->更新->渲从创建到销毁的过程就是生命周期。

有兴趣的小船夫可以通过以下网站去看一下官方文档：
$\color{#FF0000}{https://cn.vuejs.org/v2/guide/instance.html}$
以下生命周期模型：
在这里插入图片描述

代码实例

json文件

{ "programmers": [

    { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
    
    { "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },
    
    { "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }
    
    ],
    
    "authors": [
    
    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
    
    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }
        
    ],
    
    "musicians": [
    
    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
    
    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
    
    ] }

实例代码

接下来编写代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!-- view层 模版 -->
<div id="vue">
  <div>{{info.authors}}</div>
</div>
<!-- 1.导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript"></script>
<script>
  var vm = new Vue({
      // 数据
      el:"#vue",
      // data: vm 的属性
      data(){
          return {
              // 请求返回参数的格式 必须和json字符串格式一样
              info: {
                  authors: {
                      firstName: null,
                      lastName: null,
                      email: null
                  }
              }
          }
      },
      mounted(){//钩子函数，链式编程(其中then可以理解为·然后·)，ES6
          //其中 => 可以理解为指向的含义 
          axios.get('../data.json').then(response=>(this.info=response.data));
      }
      
  });
</script>
</body>
</html>

运行结果为：
在这里插入图片描述

在这里有必要向小船夫提醒一下： $\color{#FF0000}{闪烁问题}$ ，那么什么是闪烁，如下图
在这里插入图片描述

其中在网速较慢的时候会出现模版，如果在正规开发出现这个问题虽然是非致命的，但是在面对客户的时候这样子就会展示出我们专业素养不是很高，尽量避免。直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- v-clock解决闪烁问题 -->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<!-- view层 模版 -->
<div id="vue" v-clock>
    <div>{{info.authors}}</div>
</div>
<!-- 1.导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript"></script>
<script>
    var vm = new Vue({
        // 数据
        el:"#vue",
        // data: vm 的属性
        data(){
            return {
                // 请求返回参数的格式 必须和json字符串格式一样
                info: {
                    authors: {
                        firstName: null,
                        lastName: null,
                        email: null
                    }
                }
            }
        },
        mounted(){//钩子函数，链式编程(其中then可以理解为·然后·)，ES6
            //其中 => 可以理解为指向的含义 
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
        
    });
</script>
</body>
</html>