uniapp vue3 ts封装请求

UniApp是一个基于Vue.js的跨平台开发框架，可以同时开发iOS、Android、H5等多个平台的应用。Vue 3是Vue.js的最新版本，带来了许多新特性和改进。在UniApp中使用Vue 3和TypeScript来封装请求可以按照以下步骤进行：

1. 安装依赖：在UniApp项目中，首先需要安装axios库和@types/axios库，用于发送HTTP请求和提供TypeScript类型定义。

npm install axios @types/axios

2. 创建请求封装文件：在项目的`src`目录下创建一个`api`文件夹，并在该文件夹下创建一个`request.ts`文件，用于封装请求相关的代码。

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在发送请求之前做一些处理，例如添加token等
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 对响应数据进行处理，例如统一处理错误码等
    return response.data;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

// 封装GET请求
export function get(url: string, params?: any): Promise<any> {
  return instance.get(url, { params });
}

// 封装POST请求
export function post(url: string, data?: any): Promise<any> {
  return instance.post(url, data);
}

// 其他请求方法的封装，例如PUT、DELETE等

3. 使用请求封装：在需要发送请求的地方，引入`request.ts`文件，并调用相应的请求方法。

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

// 发送GET请求
get('/user/info', { id: 1 })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

// 发送POST请求
post('/user/login', { username: 'admin', password: '123456' })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

// 其他请求方法的使用，例如PUT、DELETE等

以上就是在UniApp中使用Vue 3和TypeScript封装请求的基本步骤。你可以根据实际需求进行进一步的封装和扩展。