Vue3网络请求之Hook：优雅管理公司级异步请求

前端

2023-09-28 18:27:17

引言

在现代化前端开发中，网络请求是一个不可或缺的环节。随着项目规模和复杂度的不断提升，如何高效、便捷地管理网络请求成为了一大难题。特别是对于Vue3这种大型单页面应用框架，异步请求的管理更是重中之重。

传统网络请求管理的痛点

传统的网络请求管理方式往往存在以下痛点：

代码冗余： 每个网络请求都需要重复编写大量的代码，导致代码臃肿、维护困难。
耦合度高： 网络请求逻辑与组件逻辑紧密耦合，不利于代码重用和模块化。
状态管理困难： 网络请求状态分散在各个组件中，难以统一管理和追踪。

Vue3 Hook 的优势

为了解决这些痛点，Vue3引入了Hook机制。Hook是一种特殊类型的函数，可以让你在特定的时机（如组件生命周期）插入自定义逻辑。通过使用Hook，我们可以构建一个可重用、解耦、状态可控的网络请求管理系统。

创建网络请求 Hook

首先，我们创建一个名为 useRequest 的网络请求 Hook：

import { reactive, ref, watch } from 'vue';

export function useRequest(url, options = {}) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const fetch = async () => {
    try {
      loading.value = true;
      const res = await fetch(url, options);
      data.value = await res.json();
    } catch (e) {
      error.value = e;
    } finally {
      loading.value = false;
    }
  };

  watch(() => url, fetch);

  return {
    data,
    loading,
    error,
    fetch,
  };
}

使用 Hook 进行网络请求

在组件中使用 useRequest Hook 非常简单：

import { useRequest } from '@/hooks/request';

export default {
  setup() {
    const { data, loading, error, fetch } = useRequest('api/users');

    fetch();

    return {
      data,
      loading,
      error,
    };
  },
};

Hook 的优势

可重用性： useRequest Hook 可以被多个组件复用，无需重复编写网络请求逻辑。
解耦性： 网络请求逻辑与组件逻辑分离，提高了代码的模块化和可维护性。
状态集中管理： 网络请求的状态集中存储在 Hook 中，便于统一管理和追踪。

在公司级项目中的应用

在公司级项目中，网络请求管理往往更加复杂，需要考虑以下因素：

跨组件共享请求： 不同组件可能需要共享同一个网络请求，避免重复请求。
缓存机制： 为了提高性能，需要实现网络请求的缓存机制，避免重复请求相同的数据。
错误处理： 需要有一套完善的错误处理机制，确保网络请求失败时能优雅地处理。

为了满足这些需求，我们可以进一步扩展 useRequest Hook，使其支持跨组件共享、缓存和错误处理：

import { createGlobalState } from 'vuex';

const globalState = createGlobalState(() => ({
  requests: {},
}));

export function useRequest(url, options = {}) {
  const globalRequests = globalState.requests;

  if (globalRequests[url]) {
    return globalRequests[url];
  }

  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const fetch = async () => {
    try {
      loading.value = true;
      const res = await fetch(url, options);
      data.value = await res.json();
    } catch (e) {
      error.value = e;
    } finally {
      loading.value = false;
    }
  };

  globalRequests[url] = {
    data,
    loading,
    error,
    fetch,
  };

  return globalRequests[url];
}