Vue2.0 http请求以及loading展示实例

下面是“Vue2.0 http请求以及loading展示实例”的完整攻略：

1. Vue2.0 http请求

1.1 引入axios

在Vue使用http请求时，我们需要先引入axios，具体方法是在需要用到 http 请求的页面中先引入axios：

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

也可以使用npm的方式安装：

npm install axios --save

然后在vue的入口文件中使用：

import axios from 'axios'
Vue.prototype.axios = axios;

1.2 使用axios

引入axios之后，我们就可以在Vue中使用axios进行http请求了。

举个栗子，我们需要向后端请求一个数据，后端提供的接口是 /api/data，我们需要将得到的数据显示在前端界面上。

<template>
    <div>
        <h1>数据展示</h1>
        <p>{{data}}</p>
    </div>
</template>

<script>
    export default {
        name: 'MyComponent',
        data () {
            return {
                data: ''
            }
        },
        mounted () {
            this.$http.get('/api/data').then((response) => {
                this.data = response.data
            }).catch((error) => {
                console.log(error)
            })
        }
    }
</script>

以上代码中，我们使用了axios的get方法向 /api/data 发送了一次get请求，它会返回一个Promise对象，当数据请求到之后，就会执行then方法中的代码，将返回的数据赋值到 data 属性上，这样就可以在前端界面上展示这个数据了。

2. loading展示实例

2.1 引入Vue-loading-overlay

Vue-loading-overlay是一个方便简易的Vue组件库，它提供了多种loading展示方式，具体可以在github地址中查看：https://github.com/ankurk91/vue-loading-overlay

我们可以使用npm的方式安装它：

npm install vue-loading-overlay --save

安装完成后，在Vue的入口文件中引入并使用：

import LoadingOverlay from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
Vue.component('LoadingOverlay', LoadingOverlay);

2.2 使用Vue-loading-overlay

Vue-loading-overlay提供了三种loading展示的方式：Fullscreen, Inline blocks, and Custom Component。我们这里使用Fullscreen的方式来展示loading。

使用Fullscreen方式展示loading的代码如下：

<template>
    <div>
        <h1>数据展示</h1>
        <p>{{data}}</p>
        <loading-overlay :active="loading"></loading-overlay>
    </div>
</template>

<script>
    import LoadingOverlay from 'vue-loading-overlay';
    import 'vue-loading-overlay/dist/vue-loading.css';

    export default {
        name: 'MyComponent',
        data () {
            return {
                data: '',
                loading: false
            }
        },
        methods: {
            getData () {
                this.loading = true;
                this.$http.get('/api/data').then((response) => {
                    this.data = response.data;
                    this.loading = false;
                }).catch((error) => {
                    console.log(error)
                    this.loading = false;
                })
            }
        },
        mounted () {
            this.getData();
        },
        components: {
            LoadingOverlay
        }
    }
</script>

以上代码中，我们创建了一个名为 LoadingOverlay 的组件，并将它挂载在Vue实例中。在加载数据的时候，我们设置 loading 属性为 true，同时在Promise的 then 和 catch 方法中都将 loading 属性的值设为了 false，这样就实现了数据加载时展示loading的效果。

最后，我们需要在模板中引入 loading-overlay 组件并使用，它会覆盖页面的整个区域，并展示loading效果。