uniapp vue3组合式使用uni.request封装请求

在UniApp中，Vue3结合使用uni.request进行网络请求的组合式API通常涉及到创建自定义的axios或http实例，并将它注入到Vue组件的原型上。这样做的目的是为了统一管理和复用网络请求，提高代码组织性和可维护性。以下是简单的步骤：

1. **安装依赖**：首先，如果尚未安装，需要安装`@dcloudio/uni-app-plus`库，它包含了uni.request功能。

npm install @dcloudio/uni-app-plus --save

2. **封装uni.request**：创建一个名为`request.js`的文件，编写一个统一的请求函数，例如：

import { UniRequest } from '@dcloudio/uni-app-plus';

const service = new UniRequest({
  url: '/api', // 请求的基础URL
  timeout: 5000, // 设置超时时间
});

export default async function request(url, options = {}) {
  const { method = 'GET', data = {}, headers = {} } = options;
  try {
    const res = await service.request({ url: `${service.url}/${url}`, method, data, headers });
    return res.data; // 返回解析后的数据
  } catch (error) {
    console.error('Network error:', error);
    throw error;
  }
}

3. **引入并使用**：在`.vue`文件中，导入并使用这个封装好的request函数：

<template>
  <div>
    <!-- ... -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { request } from '@/utils/request'; // 导入请求函数

// 使用示例
const fetchData = async () => {
  try {
    const response = await request('/your-endpoint');
    console.log(response); // 打印返回的数据
  } catch (error) {
    console.error(error);
  }
};

// 在适当的时候调用fetchData方法
</script>