解锁 Vue 3 潜力：仅用 12 行代码实现“useAxios”

2023-10-10 15:27:31

Vue 3 已横空出世，带来了各种激动人心的新功能，其中之一就是 ref API。ref 允许我们在 Vue 组件之外定义可追踪的变量，释放了前所未有的灵活性。基于这一创新，我们探索了如何仅用 12 行代码在 Vue 3 中实现一个功能强大的“useAxios”函数。

从零开始：深入浅出 ref API

ref 的核心思想在于允许我们定义一个可追踪的变量，该变量独立于组件的 data 选项。这为我们提供了在组件外部存储和管理数据的灵活性，从而使代码更具模块化和可重用性。

构建“useAxios”：精简高效的 HTTP 请求

利用 ref API 的强大功能，我们可以构建一个名为“useAxios”的函数，它将简化我们在 Vue 3 中进行 HTTP 请求的过程。这个函数接受一个 axios 实例作为参数，并返回一个对象，该对象包含执行 GET、POST、PUT 和 DELETE 请求所需的所有方法。

import axios from "axios";

export function useAxios(axiosInstance) {
  const request = ref(null);

  const get = async (url, config) => {
    request.value = axiosInstance.get(url, config);
    return request.value;
  };

  const post = async (url, data, config) => {
    request.value = axiosInstance.post(url, data, config);
    return request.value;
  };

  const put = async (url, data, config) => {
    request.value = axiosInstance.put(url, data, config);
    return request.value;
  };

  const del = async (url, config) => {
    request.value = axiosInstance.delete(url, config);
    return request.value;
  };

  return {
    get,
    post,
    put,
    del,
  };
}

优势尽显：代码重用与灵活性

“useAxios”函数提供了许多好处，包括：

代码重用： 它将 HTTP 请求逻辑从组件中提取出来，允许在多个组件中重用。
灵活性： 它允许我们使用自定义 axios 实例，从而为不同组件或应用程序提供定制的 HTTP 行为。
可测试性： 将 HTTP 请求逻辑与组件分离开来，简化了单元测试。

实践案例：揭示“useAxios”的强大功能

让我们来看一个实际示例，展示如何在 Vue 3 组件中使用“useAxios”函数：

import { ref } from "vue";
import { useAxios } from "@/useAxios";

export default {
  setup() {
    const axiosInstance = ref(axios.create());
    const useAxiosInstance = useAxios(axiosInstance);
    const todos = ref([]);

    const fetchTodos = async () => {
      const response = await useAxiosInstance.get("/api/todos");
      todos.value = response.data;
    };

    return {
      todos,
      fetchTodos,
    };
  },
};