Vue全局loading及错误提示的思路与实现

本文将详细讲解如何通过Vue全局loading及错误提示来提供良好的用户体验。该方案可用于任何基于Vue构建的项目，并且易于扩展。

需求分析

在处理异步请求时，用户需要了解操作的进展情况和任何错误信息。此时，全局loading和错误提示成为必要功能。解决方案需要解决以下需求：

• 可在应用程序中的所有组件中使用loading和错误提示。
• loading和错误提示需要允许用户自定义。
• 所有组件及单页应用必须支持异步路由请求。

实现思路

为实现全局loading及错误提示，我们需要在Vue根实例中添加两个成员变量：

data() {
  return {
    loading: false,
    error: null
  };
}

当我们需要显示loading或错误提示时，可以通过更新这两个变量的方式来控制显示/hide状态。

• loading： 当数据正在加载时这个值为true，当数据加载完成时这个值设置为false。
• error：当数据在请求时发生错误时，将错误信息赋值给这个变量。

实现全局的loading

我们首先来看如何实现全局loading。我们通过axios的拦截器，可以监听所有请求的发出和响应。当请求发出时，我们设置loading状态为true, 当请求响应后，我们设置loading状态为false。

import axios from 'axios';

axios.interceptors.request.use(config => {
  // 请求发出前 显示loading
  this.loading = true;
  return config;
}, error => {
  // 发出请求错误时 不需要显示loading
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  // 响应完成后  关闭loading
  this.loading = false;
  return response;
}, error => {
  // 响应发生错误时， 关闭loading并设置错误信息
  this.loading = false;
  this.error = error.response.data.message || error.message;
  return Promise.reject(error);
});

在上面的代码中，我们扩展了axios的拦截器，添加了两个监听函数，用于在请求发出前和请求响应后进行状态调整。

实现全局的错误提示

接下来，我们来看如何实现全局的错误提示。我们可以在根Vue实例中注册一个全局错误处理程序，然后在任何地方发生错误时捕获并处理这些错误。可以考虑使用Vue的插件机制封装全局错误处理程序。

import Vue from 'vue';

const Toast = {};
Toast.install = function(Vue, options) {
  Vue.prototype.$toast = (message) => {
    const Component = Vue.extend({
      template: `<div class="toast toast-active">
        <div class="toast-message">${message}</div>
      </div>`
    });

    const component = new Component().$mount();
    document.body.appendChild(component.$el);

    setTimeout(() => {
      document.body.removeChild(component.$el);
    }, 3000);
  };
};

Vue.use(Toast);

上述代码中，我们创建一个Toast插件。该插件注册了一个$toast方法，显示错误消息。当该方法被调用时，该方法会将消息渲染到页面上，然后在3秒钟后自动消失。

现在，我们可以扩展我们的axios拦截器，以使用$toast方法来显示错误消息。当我们发生请求错误时，设置错误信息并通过插件的方式显示出来。

axios.interceptors.response.use(response => {
  // 响应完成后  关闭loading
  this.loading = false;
  return response;
}, error => {
  // 响应发生错误时， 关闭loading并设置错误信息
  this.loading = false;
  this.error = error.response.data.message || error.message;
  this.$toast(this.error);
  return Promise.reject(error);
});

示例

下面是如何在组件中使用全局loading和错误提示的示例：

<template>
  <div>
    <button @click="loadData">加载数据</button>

    <div v-if="loading">正在加载...</div>

    <div v-else>
      <div v-if="error">{{ error }}</div>
      <ul>
        <li v-for="item in items">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      loading: false,
      error: null
    };
  },

  methods: {
    async loadData() {
      this.loading = true;
      try {
        const res = await axios.get('/api/items');
        this.items = res.data.items;
      } catch(err) {
        this.error = err.message || err.response.data.message;
      }
      this.loading = false;
    }
  }
};
</script>

在上面的代码中，我们首先在组件中绑定loading和error状态。当我们点击loadData按钮时，设置loading状态为true，执行ajax请求，请求完成后将获取的数据保存在items变量中，如果请求发生错误，则设置错误信息到error变量中。

接下来，使用v-if指令根据loading和error变量来显示或隐藏加载信息和错误信息。在数据准备好之后，我们显示items数据。

总结

通过拦截器和插件，我们可以轻松地实现全局loading和错误提示。在以上文中的实现过程中，我们使用了axios作为ajax库，但实际上，这种方法也可以应用于其他ajax库。如有问题请随时联系。