Vue3中使用Axios构建高效的请求处理机制

一、为什么选择Axios

Axios的优势不必多说，但是对于在vue项目中使用，它有以下优势：

支持请求和响应拦截器，便于集中处理错误和认证。
简化请求配置，支持自定义实例。
良好的 TypeScript 支持，方便定义接口的类型。

二、配置 Axios 实例

首先，创建一个axios.ts文件，用于配置 Axios 实例。这样可以确保所有 HTTP 请求共享统一的全局配置。

TypeScript 复制代码

import axios, { type AxiosInstance, type InternalAxiosRequestConfig, type AxiosResponse } from 'axios';

const apiClient: AxiosInstance = axios.create({
  baseURL:  //根据项目需求配置对应的基地址
  timeout:  //根据项目需求配置对应的请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

// 添加请求拦截器
apiClient.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    // 根据存储token的方式获取
    const token = localStorage.getItem('token');
    if (token && config.headers) {
        // 添加到请求头上
      config.headers.token = token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
apiClient.interceptors.response.use(
  (response: AxiosResponse) => {
    return response.data;
  },
  (error) => {
    // 全局错误处理
    if (error.response && error.response.status === 401) {
      // 跳转登录页的逻辑，例如使用router
    }
      // 还可以有其他类型的错误处理    
    return Promise.reject(error);
  }
);

export default apiClient;

三、封装通用的请求 Hook：useRequsst

为了在组件中更优雅地、方便快捷地发起请求，我们封装了一个通用的 Hook，支持灵活的请求方法、数据处理和错误管理。

TypeScript 复制代码

import { shallowRef, type Ref } from "vue";
//从刚才创建的axios.ts中获取实例
import apiClient from "../api/axios";

// 定义 HTTP 方法的类型
type HttpMethod = "get" | "post" | "put" | "delete";

interface RequestOptions {
    url: string;
    method?: HttpMethod;
    requestData?: Record<string, unknown>;
}

// 定义 useRequest 返回的类型，包括有 请求成功返回的数据、错误信息、加载信息、发送请求的函数
interface UseRequestResult<T> {
    data: Ref<T | null>;
    error: Ref<Error | null>;
    loading: Ref<boolean>;
    executeRequest: (options: RequestOptions) => Promise<void>;
}

export function useRequest<T = unknown>(): UseRequestResult<T> {
    const data = shallowRef<T | null>(null);
    const error = shallowRef<Error | null>(null);
    const loading = shallowRef<boolean>(false);

    const executeRequest = async ({
        url,
        // 设置默认值
        method = "get",
        requestData,
    }: RequestOptions): Promise<void> => {
        loading.value = true;
        error.value = null;

        try {
            const response = await apiClient.request<T>({
                url,
                method,
                ...(method !== "get" ? { data: requestData } : {}),
            });
            data.value = response;
        } catch (err) {
            error.value = err instanceof Error ? err : new Error(String(err));
        } finally {
            loading.value = false;
        }
    };

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

封装成hook的优势：

1、参数化请求

通过参数动态指定发送请求的url和method

2、状态管理

loading ：请求状态（true表示在请求中，false表示未在请求中）
error：储存请求返回的错误信息
data：储存请求返回的数据

3、类型管理

使用ts限定了请求数据、响应数据以及状态数据的格式，规避了类型冲突问题

四、使用实例：

使用封装的hook创建用户：

html 复制代码

<script setup lang="ts">
import { useRequest } from '@/hooks/useRequest';

const { data, error, loading, executeRequest } = useRequest<{ id: number; name: string }>();

const createUser = () => {
  executeRequest({
    // 传入调用请求函数必须的参数 
    url: '/users',
    method: 'post', // 不传方法默认get
    requestData: { name: 'New User' },
  });
};
</script>

<template>
 <!-- 使用状态信息灵活改变页面呈现的内容 -->
  <button @click="createUser" :disabled="loading">创建用户</button>
  <div v-if="loading">创建中...</div>
  <div v-else-if="error">发生错误：{{ error.message }}</div>
  <div v-else-if="data">创建成功！用户 ID：{{ data.id }}</div>
</template>

五、总结

以上的内容成功实现了Axios实例的配置、封装请求hook、请求的状态管，这样不仅提升了代码的复用性和可维护性，也使得 Vue 组件中的逻辑更加清晰。