Vue3和Axios联手：全局请求Loading及特殊接口配置

在当今的网络应用中，无论是电商网站，社交平台，还是新闻资讯，都离不开前端页面和服务器端的频繁交互。当请求数据时，一般我们会在页面中添加一个Loading动画，当数据返回时，就将该动画关闭。Vue3 结合Axios，就能够完美地实现这个需求，甚至让我们能对个别接口实现特殊配置，比如不显示Loading动画。在本篇博客中，我们将深入探讨如何实现这个功能。

首先，我们需要为项目安装axios：

npm install axios --save

接着，我们将axios进行全局配置。我们可以创建一个文件request.js，将配置写在里面：

import axios from 'axios';
import { Loading, Message } from 'element-ui';

let loading;

function startLoading() {
  loading = Loading.service({
    lock: true,
    text: '拼命加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
}

function endLoading() {
  loading.close();
}

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_URL,
  timeout: 5000
});

// 请求拦截
service.interceptors.request.use(
  config => {
    // 加载动画
    startLoading();
    return config;
  },
  error => {
    // 错误提醒
    endLoading();
    Message.error(error.message);
    return Promise.reject(error);
  }
);

// 响应拦截
service.interceptors.response.use(
  response => {
    // 结束加载动画
    endLoading();
    return response.data;
  },
  error => {
    // 错误提醒
    endLoading();
    Message.error(error.message);
    return Promise.reject(error);
  }
);

export default service;

以上就是我们的全局配置，基本涵盖了详细的操作流程。但是，在某次开发中，我发现有的接口我们并不想显示Loading动画，为了解决这个问题，我们可以在请求中添加一个自定义参数，例如isShowLoading，用来决定是否显示Loading动画。

可以将request.js改造为：

// 请求拦截
service.interceptors.request.use(
  config => {
    if (!config.hideLoading) {
      // 如果配置了hideLoading: true，则不显示loading
      startLoading();
    }
    return config;
  },
  error => {
    endLoading();
    Message.error(error.message);
    return Promise.reject(error);
  }
);

// 响应拦截
service.interceptors.response.use(
  response => {
    endLoading();
    return response.data;
  },
  error => {
    endLoading();
    Message.error(error.message);
    return Promise.reject(error);
  }
);

这样做之后，我们在使用axios请求接口时，如果某个接口我们不想显示Loading，可以这样写：

this.$http({
  method: 'post',
  url: '/axios',
  data: param,
  hideLoading: true
});

以上就是如何在vue3中使用axios添加全局Loading效果，以及对个别接口进行特殊配置的方法。希望本篇博客对大家有所帮助。