uni-app中封装request请求vue3+ts

在uni-app中封装request请求可以按照以下步骤进行：

在uni-app项目中创建一个api文件夹，用于存放网络请求相关的文件。
在api文件夹中创建一个request.ts文件，用于封装网络请求的函数。

// api/request.ts

import { uniRequest } from '@/utils/uniRequest';

// 封装get请求
export function get(url: string, params: any) {
  return uniRequest({
    url,
    method: 'GET',
    data: params
  });
}

// 封装post请求
export function post(url: string, data: any) {
  return uniRequest({
    url,
    method: 'POST',
    data
  });
}

在utils文件夹中创建一个uniRequest.ts文件，用于封装uni-app的网络请求方法。

// utils/uniRequest.ts

export function uniRequest(config: any) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: config.url,
      method: config.method,
      data: config.data,
      header: {
        'Content-Type': 'application/json',
      },
      success: (res) => {
        resolve(res.data);
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

在需要使用网络请求的地方，引入api/request.ts文件，并调用相应的请求方法。

// 在某个组件中使用网络请求

import { get, post } from '@/api/request';

export default {
  methods: {
    async fetchData() {
      try {
        const res = await get('/api/data', { id: 1 });
        console.log(res);
      } catch (error) {
        console.error(error);
      }
    },
  },
};

这样就完成了uni-app中封装request请求的过程。通过封装后，可以在项目中统一管理网络请求，提高代码复用性，并且方便进行后续的维护和扩展