axios封装loading状态

原创

mob64ca12e4972a 2024-09-09 05:00:43 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e4972a的原创作品，请联系作者获取转载授权，否则将追究法律责任

Axios封装Loading状态的实现指南

在现代前端开发中，我们经常需要处理异步请求，而这些请求通常会涉及到用户体验的优化，例如显示加载状态。Axios是一个流行的HTTP客户端，我们可以为其封装加载状态，以便在请求开始时显示加载动画，而在请求结束时隐藏它。下面将详细介绍如何实现这一功能。

过程概述

以下是实现Axios封装Loading状态的主要步骤：

步骤	描述
1	安装axios库
2	创建一个axios实例并设置拦截器
3	管理加载状态
4	在Vue组件中使用封装后的axios

步骤详解

第一步：安装axios库

首先确保你有安装axios。如果还没有安装，可以使用以下命令：

npm install axios

“这条命令会将axios库添加到你的项目依赖中。”

第二步：创建一个axios实例并设置拦截器

创建一个新的文件 axiosInstance.js 来封装axios，设置请求和响应的拦截器：

// axiosInstance.js
import axios from 'axios';

// 创建axios实例
const axiosInstance = axios.create({
  baseURL: ' // 设置基础URL
  timeout: 10000, // 设置超时时间
});

// 请求拦截器
axiosInstance.interceptors.request.use((config) => {
  // 请求开始，显示loading
  showLoading();
  return config;
}, (error) => {
  // 请求错误，隐藏loading
  hideLoading();
  return Promise.reject(error);
});

// 响应拦截器
axiosInstance.interceptors.response.use((response) => {
  // 请求成功，隐藏loading
  hideLoading();
  return response;
}, (error) => {
  // 请求失败，隐藏loading
  hideLoading();
  return Promise.reject(error);
});

// 显示loading的函数
function showLoading() {
  console.log('Loading...'); // 这里可以替换成实际的loading动画
}

// 隐藏loading的函数
function hideLoading() {
  console.log('Loading finished'); // 这里可以替换成实际的loading结束逻辑
}

// 导出axios实例
export default axiosInstance;

“这里创建了一个axios实例，并在请求和响应拦截器中管理loading状态。”

第三步：管理加载状态

在上面的代码中，showLoading 和 hideLoading 函数用于控制加载逻辑。你可以根据需要替换为实际的加载组件或动画。以下是状态管理的示意图：

stateDiagram
    [*] --> Idle
    Idle --> Loading : 发起请求
    Loading --> Loaded : 请求成功
    Loading --> Error : 请求失败
    Loaded --> Idle : 再次发起请求
    Error --> Idle : 处理错误

“这个状态图展示了在发起请求、加载中、加载结果及错误处理之间的状态转换。”

第四步：在Vue组件中使用封装后的axios

在你的Vue组件中，你可以使用封装后的axios实例来发起请求，并在组件中使用：

// MyComponent.vue
<template>
  <div>
    数据展示
    <!-- 这里可以添加loading的UI -->
  </div>
</template>

<script>
import axiosInstance from './axiosInstance';

export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await axiosInstance.get('/data'); // 发送请求
        this.data = response.data;
      } catch (error) {
        console.error('请求失败:', error);
      }
    },
  },
};
</script>