vue3封装uni.request

### 如何在 Vue 3 中封装 `uni.request` 实现 HTTP 请求的最佳实践

#### 创建请求工具函数模块
为了使项目结构清晰并便于维护，在项目的 `utils` 文件夹下创建一个新的 JavaScript 或 TypeScript 文件用于定义全局可用的请求方法。

对于基于TypeScript 的实现方式如下所示：

// utils/request.ts
import { UniRequestConfig, UniResponse } from '@dcloudio/uni-app';

const BASE_URL = process.env.VUE_APP_BASE_API || '';

export default async function request<T>(
    config: UniRequestConfig,
): Promise<UniResponse<T>> {
    try {
        const response = await uni.request({
            ...config,
            url: `${BASE_URL}${config.url}`,
            header: {
                'content-type': 'application/json',
                ...(config.header ?? {}),
            },
        });
        
        if (response.statusCode >= 200 && response.statusCode < 300) {
            return response;
        }
        throw new Error(`Server responded with status code ${response.statusCode}`);
    } catch (error) {
        console.error('Error occurred during the request:', error);
        throw error;
    }
}

此代码片段展示了如何设置默认的基础URL以及处理响应状态码错误的情况[^1]。

#### 定义特定业务逻辑的服务层接口
针对不同的API端点和服务需求，可以进一步抽象出具体服务类来调用上述通用的`request` 函数。这有助于提高代码可读性和重用率。

例如登录功能的相关操作可以在单独的一个文件里完成声明:

// services/login-service.ts
import request from '@/utils/request';

interface LoginData {
    username?: string;
    password?: string;
}

export const loginWithCredentials = ({username, password}: LoginData) => {
    return request<{token:string}> ({
        url: '/auth/token',
        method:'POST',
        data:{username,password},
    })
};

这里通过泛型指定了预期返回的数据类型，并且利用解构赋值简化参数传递过程[^2].

#### 初始化应用时挂载到全局对象上
为了让整个应用程序都能方便地访问这些自定义的方法而无需每次都导入它们，可以在启动阶段将此类实例绑定至Vue原型链或者其他合适的地方。

如果采用的是组合式 API 风格的应用程序，则推荐的做法是在入口处配置好之后再注入给根组件实例：

// main.ts
import { createSSRApp } from 'vue';
import App from './App.vue';
import request from './utils/request';

const app = createSSRApp(App);

app.config.globalProperties.$http = request;

export function createApp() {
    return { app };
}

这样做的好处是可以让任何地方都可以轻松获取到 `$http` 属性来进行网络通信而不必担心路径依赖等问题[^3].