uniapp-vue3小程序封装api，请求地址写在index.ts里 ，请求get，post传参写着sun.ts里，然后在APP.vue 中使用得到他返回的数据使用axios方式

在使用uniapp开发Vue3小程序时，通常会通过封装API来管理网络请求，以提高代码的可维护性和复用性。以下是一个简单的封装流程示例：

1. 在项目的根目录或适当位置创建一个`api`文件夹，然后在该文件夹内创建`index.ts`文件用于存放所有的API接口地址。

2. 在`api`文件夹中创建`sun.ts`文件，用于定义GET和POST请求的参数类型和数据格式。

3. 创建一个`http.ts`文件，在其中封装axios请求方法，以供其他组件或页面调用。

下面是具体的代码实现：

**index.ts** (存放API接口地址)

// 假设我们有一个用户接口
export const getUser = '/user/info';

**sun.ts** (存放请求参数的定义)

// 为GET和POST请求定义参数结构
export interface GetParams {
  key?: string;
  // 其他GET请求参数...
}

export interface PostParams {
  data: {
    // 需要提交的数据结构...
  };
}

**http.ts** (封装axios请求方法)

import axios from 'axios';
import { getUser } from './index';
import { GetParams, PostParams } from './sun';

// 创建axios实例
const http = axios.create({
  baseURL: '你的服务器地址', // 开发者服务器地址
  timeout: 5000,
});

// 请求拦截器
http.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
http.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

// 封装GET请求方法
export const get = async (url: string, params?: GetParams) => {
  return await http.get(url, { params });
};

// 封装POST请求方法
export const post = async (url: string, params?: PostParams) => {
  return await http.post(url, params);
};

**APP.vue** (在页面中使用封装好的API)

<template>
  <!-- 页面内容 -->
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { getUser, get, post } from '@/api';

export default defineComponent({
  name: 'App',
  setup() {
    // 获取用户信息的示例
    const fetchUserInfo = async () => {
      try {
        const response = await get(getUser);
        console.log('用户信息:', response.data);
        // 处理返回的数据...
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    };

    // 页面加载完成后执行获取用户信息
    onMounted(() => {
      fetchUserInfo();
    });

    return {};
  }
});
</script>

在上述示例中，我们在`index.ts`中定义了API接口地址，在`sun.ts`中定义了请求参数的类型，在`http.ts`中封装了axios请求方法，并在`APP.vue`中使用封装好的API来获取数据。这样的封装方式使得代码更加模块化和易于维护。