深入剖析 Vue3 + Vite 项目搭建 - 封装全局请求 Axios (单例模式)

2023-12-04 20:01:10

随着 Vue3 的推出和 Vite 的兴起，前端开发格局正经历着一场变革。这两个强大的工具相辅相成，为开发者构建高效、快速且功能丰富的 Web 应用程序提供了新的契机。本文将引导您一步步搭建一个基于 Vue3 + Vite 的项目，并演示如何封装一个全局请求 Axios 实例，实现单例模式，以简化和优化您的请求管理。

1. 项目搭建

首先，让我们从创建一个新的 Vue3 + Vite 项目开始。您可以使用以下命令轻松实现：

npx create-vue-app <project-name> --template vue3

2. 安装依赖

安装必要的依赖项，包括 Vue3、Vite 和 Axios：

npm install vue@next vite axios

3. 统一管理配置

在 src/config/net.config.ts 中创建一个新的配置文件，用于管理网络请求的配置。

import axios from "axios";

const config = {
  baseURL: "https://example.com/api",
  timeout: 10000,
  headers: {
    "Content-Type": "application/json",
  },
};

export const netConfig = axios.create(config);

4. 封装 API 模块

在 src/api/index.ts 中创建 API 模块，用于管理请求路径。

import { netConfig } from "../config/net.config";

export const getUsers = () => netConfig.get("/users");

export const createUser = (data) => netConfig.post("/users", data);

5. 创建请求所需类型

在 src/types/index.ts 中创建请求所需的类型定义。

export interface User {
  id: number;
  name: string;
  email: string;
}

6. 封装请求

在 src/utils/request.ts 中封装一个函数，用于发送请求。

import { netConfig } from "../config/net.config";

export const request = async (config) => {
  try {
    const response = await netConfig(config);
    return response.data;
  } catch (error) {
    throw error;
  }
};

7. 全局注册

在 src/main.ts 中全局注册 Axios 实例，以便在整个应用程序中使用。

import { createApp } from "vue";
import App from "./App.vue";
import { request } from "./utils/request";

const app = createApp(App);

app.config.globalProperties.$request = request;

app.mount("#app");

8. 使用全局请求实例

现在，您可以在组件中使用 $request 全局属性发送请求。

<template>
  <div>
    <button @click="fetchUsers">Fetch Users</button>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from "vue";
import { $request } from "@/utils/request";

export default {
  setup() {
    const users = ref([]);

    const fetchUsers = async () => {
      const response = await $request({
        url: "/users",
        method: "get",
      });

      users.value = response.data;
    };

    return {
      users,
      fetchUsers,
    };
  },
};
</script>